/* Listes avec saisie (combobox.js) : filtres de la page des résultats et formulaire de publication. */

.kmb-cbx {
	position: relative;
}

/* « body » pour passer devant la règle de Divi sur input[type="text"] (padding: 2px), plus précise que .kmb-input : sans lui le texte
   collait au bord et passait sous les boutons. */
body .kmb-cbx .kmb-cbx__input {
	padding: var(--kmb-space-2) 3rem var(--kmb-space-2) var(--kmb-space-4);
	text-overflow: ellipsis;
}

body .kmb-cbx.has-value .kmb-cbx__input {
	padding-inline-end: 5.25rem;
}

.kmb-cbx__btn {
	position: absolute;
	inset-block: 0;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--kmb-ink-600);
}

.kmb-cbx__btn[hidden] {
	display: none;
}

.kmb-cbx__chevron {
	inset-inline-end: 0;
	cursor: pointer;
	transition: transform 200ms var(--kmb-ease), color var(--kmb-dur) var(--kmb-ease);
}

.kmb-cbx[data-open] .kmb-cbx__chevron {
	transform: rotate(180deg);
	color: var(--kmb-brand-600);
}

.kmb-cbx__clear {
	inset-inline-end: 2.5rem;
	border-radius: var(--kmb-radius-pill);
	cursor: pointer;
	transition: color var(--kmb-dur) var(--kmb-ease);
}

.kmb-cbx__clear:hover {
	color: var(--kmb-brand-600);
}

.kmb-cbx__list {
	position: absolute;
	inset: calc(100% + var(--kmb-space-2)) 0 auto;
	z-index: 40;
	max-block-size: min(20rem, 55vh);
	padding: var(--kmb-space-2);
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-md);
	background: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-lg);
	transform-origin: top center;
	animation: kmb-cbx-in 180ms var(--kmb-ease);
}

.kmb-cbx__list[hidden] {
	display: none;
}

@keyframes kmb-cbx-in {
	from {
		opacity: 0;
		transform: translateY(-6px) scale(0.98);
	}
}

.kmb-cbx__group {
	padding: var(--kmb-space-3) var(--kmb-space-3) var(--kmb-space-1);
	color: var(--kmb-ink-600);
	font-size: var(--kmb-fs-small);
	font-weight: var(--kmb-fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.kmb-cbx__option {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kmb-space-3);
	min-block-size: var(--kmb-tap);
	padding: var(--kmb-space-2) var(--kmb-space-3);
	border-radius: var(--kmb-radius-sm);
	color: var(--kmb-ink-900);
	cursor: pointer;
	transition: background-color var(--kmb-dur) var(--kmb-ease);
}

/* Liseré qui se déploie sur l'option visée (survol, clavier) : le remplissage au survol de l'étude du site « kiwi », sans bibliothèque. */
.kmb-cbx__option::before {
	content: "";
	position: absolute;
	inset-block: 25%;
	inset-inline-start: 0;
	inline-size: 3px;
	border-radius: 2px;
	background: var(--kmb-brand-600);
	transform: scaleY(0);
	transition: transform 180ms var(--kmb-ease);
}

.kmb-cbx__option[data-active="true"],
.kmb-cbx__option:hover {
	background: var(--kmb-brand-50);
}

.kmb-cbx__option[data-active="true"]::before,
.kmb-cbx__option:hover::before {
	transform: scaleY(1);
}

.kmb-cbx__option[aria-selected="true"] .kmb-cbx__name {
	color: var(--kmb-brand-700);
	font-weight: var(--kmb-fw-semibold);
}

.kmb-cbx__option.is-empty {
	color: var(--kmb-ink-600);
	cursor: not-allowed;
}

.kmb-cbx__option.is-empty:hover {
	background: none;
}

.kmb-cbx__option.is-empty:hover::before {
	transform: scaleY(0);
}

.kmb-cbx__count {
	flex: none;
	padding: 0 var(--kmb-space-2);
	border-radius: var(--kmb-radius-pill);
	background: var(--kmb-surface-100);
	color: var(--kmb-ink-600);
	font-size: var(--kmb-fs-small);
	font-variant-numeric: tabular-nums;
}

.kmb-cbx__name mark {
	background: none;
	color: var(--kmb-brand-700);
	font-weight: var(--kmb-fw-bold);
}

.kmb-cbx__none {
	padding: var(--kmb-space-4);
	color: var(--kmb-ink-600);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.kmb-cbx__list {
		animation: none;
	}

	.kmb-cbx__chevron,
	.kmb-cbx__option::before {
		transition: none;
	}
}