/**
 * Facet typeahead (aanbod archive zoekbalk-vervanging).
 *
 * Plain CSS, enqueued standalone alongside typeahead.js (no Vite build step), so
 * it mirrors the archive.js delivery model. Colour values are the literal theme
 * SCSS variables (_variables.scss): #f7fafd $color-light-blue, #e8ebf3
 * $color-gray-lighter, #9f9fa0 $color-gray-base, #6e6e6e $color-gray-dark,
 * #1e1e2f $color-font-base.
 *
 * This file styles only the dropdown, the clear button and the note. The input
 * itself is a plain themed `u-textInput -search`.
 */

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

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

/* The input draws itself entirely from `u-textInput -search` (background, border,
   radius, height, placeholder, focus ring, and the magnifier — which that modifier
   paints as a background-image, so this component adds no icon of its own).
   Only the room for the clear button is ours: `.u-textInput` sets the padding
   shorthand, so this needs two classes to win on specificity rather than on
   stylesheet order, which nothing declares. */

.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` on a class beats the UA rule for [hidden], so the empty-state button
   would otherwise sit there permanently. */
.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;
}

.m-facetTypeahead__optionLabel {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

/* ---- leftover words the parser could not place ---- */

.m-facetTypeahead__note {
	margin: 6px 2px 0;
	font-size: 13px;
	color: #9f9fa0;
}

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

/* De ingekorte-zoekterm-melding is geen terzijde maar de verklaring waarom de lijst breder is
   dan gevraagd. Het grijs hierboven haalt ~2,5:1 op wit en valt daarmee onder WCAG AA; deze
   variant haalt ~9:1. Alleen voor de servermelding, zodat de subtiele "niet herkend"-hint
   van de typeahead zelf onopvallend blijft. */
.m-facetTypeahead__note.-notice {
	color: #4a4a4d;
	font-weight: 500;
}

/* ---- a11y helper (self-contained; the theme's .u-visuallyHidden lives in a
       component bundle that isn't guaranteed on this page) ---- */

.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;
}