/**
 * Facet-typeahead (zoekbalk op het aanbod-archief).
 *
 * Platte CSS, los ingeschreven naast typeahead.js (geen Vite-build), zodat het
 * hetzelfde leveringsmodel volgt als js/voertuig/archive.js. De kleurwaarden zijn
 * letterlijk de theme-SCSS-variabelen (resources/css/variables/_variables.scss):
 * #F7FAFD $color-light-blue, #E8EBF3 $color-gray-lighter, #9f9fa0 $color-gray-base,
 * #6E6E6E $color-gray-dark, #1E1E2F $color-font-base.
 *
 * Dit bestand stijlt alleen de dropdown en de wisknop. Het invoerveld zelf is een
 * gewone `u-textInput -search` uit archive-filter.scss.
 */

.m-facetTypeahead {
	position: relative;
	width: 100%;
	min-width: 0;
}

.m-facetTypeahead__control {
	position: relative;
	display: flex;
	align-items: center;
}

/* Het invoerveld tekent zichzelf volledig uit `u-textInput -search` (achtergrond,
   hoogte, radius, placeholder, focusring en het vergrootglas, dat die modifier als
   background-image zet — deze component voegt dus geen eigen icoon toe). Alleen de
   ruimte voor de wisknop is van ons: `.u-textInput` zet padding als shorthand, dus
   dit heeft twee klassen nodig om op specificiteit te winnen in plaats van op
   volgorde, want die is nergens vastgelegd. */

.m-facetTypeahead .m-facetTypeahead__input {
	padding-right: 40px;
}

.m-facetTypeahead__clear {
	position: absolute;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #6e6e6e;
	cursor: pointer;
}

/* `display` op een klasse wint van de UA-regel voor [hidden], dus zonder dit blijft
   de knop in de lege staat gewoon staan. */
.m-facetTypeahead__clear[hidden] {
	display: none;
}

.m-facetTypeahead__clear:hover {
	background-color: #f7fafd;
	color: #1e1e2f;
}

/* ---- dropdown ---- */

.m-facetTypeahead__list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 950;
	margin: 0;
	padding: 6px;
	list-style: none;
	max-height: 340px;
	overflow-y: auto;
	background-color: #fff;
	border: 1px solid #e8ebf3;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(30, 30, 47, 0.14);
	overscroll-behavior: contain;
}

.m-facetTypeahead__list[hidden] {
	display: none;
}

.m-facetTypeahead__group {
	padding: 10px 12px 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #9f9fa0;
}

.m-facetTypeahead__group:first-child {
	padding-top: 4px;
}

.m-facetTypeahead__option {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 12px;
	border-radius: 7px;
	font-size: 16px;
	color: #1e1e2f;
	cursor: pointer;
}

.m-facetTypeahead__option.-active,
.m-facetTypeahead__option:hover {
	background-color: #f7fafd;
}

/* Sommige facetlabels staan in kleine letters in search.json ("personenwagens").
   De zijbalk kapitaliseert ze met dezelfde regel (archive-filter.scss:238), dus de
   suggestie hoort er niet anders uit te zien dan de checkbox waar hij naar wijst. */
.m-facetTypeahead__optionLabel {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-transform: capitalize;
}

.m-facetTypeahead__optionMeta {
	flex: 0 0 auto;
	font-size: 13px;
	color: #9f9fa0;
}

/* ---- vrije-tekstrij ----
   Staat altijd bovenaan en zet de getypte tekst als zoekterm in plaats van één
   filter. De streep eronder scheidt "breed zoeken" van de suggesties, zodat de
   keuze zichtbaar is in plaats van verstopt in het gedrag van de Enter-toets. */

.m-facetTypeahead__option.-free {
	border-bottom: 1px solid #e8ebf3;
	border-radius: 7px 7px 0 0;
	margin-bottom: 2px;
}

/* Een hele zin hoort niet gekapitaliseerd te worden zoals de facetlabels. */
.m-facetTypeahead__optionLabel.-plain {
	text-transform: none;
}

/* ---- melding: filters die de zoekbalk niet heeft toegevoegd (zachte limiet) ---- */

.m-facetTypeahead__note {
	margin: 6px 2px 0;
	font-size: 13px;
	color: #4a4a4d;
	font-weight: 500;
}

.m-facetTypeahead__note[hidden] {
	display: none;
}

/* ---- a11y-hulpklasse (op zichzelf staand; de .u-visuallyHidden van het theme zit
       in een componentbundel die op deze pagina niet gegarandeerd is) ---- */

.m-facetTypeahead__status.u-visuallyHidden,
.m-facetTypeahead .u-visuallyHidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}