/*
 * Fortuna UI — zoekveld: pilvormig invoerveld met zoekicoon, om een lijst op de pagina te filteren.
 *   <div class="fu-zoekveld"><label class="fu-zoekveld__label" for="id">Zoek een club</label>
 *     <svg class="fu-icon" aria-hidden="true"><use href="…fortuna-icons.svg#fu-i-magnifying-glass"/></svg>
 *     <input class="fu-zoekveld__input" type="search" id="id" placeholder="Zoek een club…"></div>
 *
 * Hoogte = dezelfde schaal als knoppen en pillen (--fu-control-*): standaard even hoog als .fu-btn (l);
 *   .fu-zoekveld--m  even hoog als een .fu-chip      .fu-zoekveld--s  even hoog als .fu-btn--sm
 *   .fu-zoekveld--xl groot zoekveld (zoals de woordenlijst)
 * Look gelijk aan het zoekveld van de woordenlijst (woordenlijst.css). Alleen tokens, geen eigen maten.
 */
.fu-zoekveld {
	--fu-zoek-h: var(--fu-control-l);
	position: relative;
	flex: 0 1 calc(var(--fu-control-l) * 7);
	min-width: calc(var(--fu-control-l) * 4);
}
.fu-zoekveld--m { --fu-zoek-h: var(--fu-control-m); }
.fu-zoekveld--s { --fu-zoek-h: var(--fu-control-s); }
.fu-zoekveld--xl { --fu-zoek-h: var(--fu-control-xl); }
.fu-zoekveld__label { /* alleen voor schermlezers; zelfstandig, zonder andere stijlbestanden */
	position: absolute;
	width: var(--fu-sr-maat);
	height: var(--fu-sr-maat);
	margin: calc(var(--fu-sr-maat) * -1);
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.fu-zoekveld > .fu-icon {
	position: absolute;
	inset-inline-start: var(--fu-space-4);
	top: 50%;
	translate: 0 -50%;
	width: var(--fu-icoon-m);
	height: var(--fu-icoon-m);
	color: var(--fu-c-fg-sub);
	pointer-events: none;
}
.fu-zoekveld__input {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--fu-zoek-h);
	margin: 0;
	padding: 0 var(--fu-space-4) 0 calc(var(--fu-space-4) * 2 + var(--fu-icoon-m));
	border: var(--fu-lijn) solid var(--fu-c-line-strong);
	border-radius: var(--fu-r-pill);
	background: var(--fu-c-surface);
	color: var(--fu-c-fg);
	font: 400 var(--fu-fs-base) / 1.2 var(--fu-font-text);
	-webkit-appearance: none;
	appearance: none;
}
.fu-zoekveld--xl .fu-zoekveld__input { font-size: var(--fu-fs-md); }
.fu-zoekveld__input::placeholder { color: var(--fu-c-fg-sub); opacity: 1; }
.fu-zoekveld__input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.fu-zoekveld__input:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: var(--fu-focus-afstand-klein); border-color: var(--fu-c-brand); }
@media (max-width: 600px) {
	.fu-zoekveld { flex: 1 1 100%; }
}