/* ==========================================================================
   PX Dropdown — gedeeld filtercomponent
   ==========================================================================

   De basis komt letterlijk uit px-posts-overview, waar dit component is
   ontstaan als categoriefilter in de zijbalk van de homepage. Niets aan die
   basis is gewijzigd; hij staat hier zodat meer dan één module hem kan
   gebruiken in plaats van dat de opmaak vastzit in één component.

   Daarbovenop zit een meerkeuzelaag onder `.px-dropdown--multi`: een
   vinkvakje per optie, het aantal berichten erachter, een teller op de knop
   en een zoekveld zodra de lijst lang wordt. Enkelvoudige dropdowns merken
   daar niets van.

   ========================================================================== */

.px-dropdown {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-d025);

	max-width: 18.75rem; /* 300px */

	position: relative;
}

/* Label above the dropdown */
.px-dropdown__heading {
	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
	color: var(--black);
}

/* Trigger button */
.px-dropdown__trigger {
	display: flex;
	align-items: center;
	align-self: stretch;
	gap: var(--space-d025);

	padding: var(--space-d05) var(--space-d075);

	border: 1px solid var(--text-base);
	border-radius: var(--radius-xs);

	background-color: var(--white);

	box-shadow: var(--shadow-subtle);
	cursor: pointer;
	transition: border-color var(--duration-fast) var(--ease-smooth);
}

.px-dropdown__trigger:focus-visible {
	outline: none;
}

.px-dropdown__trigger:hover .px-dropdown__label {
	color: var(--action);
	text-decoration: underline;
}

.px-dropdown__trigger:hover .px-dropdown__caret {
	color: var(--action);
}

/* Trigger label text */
.px-dropdown__label {
	flex: 1;

	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
	color: var(--text-base);

	text-align: left;
}

/* Caret icon */
.px-dropdown__caret {
	display: flex;
	flex-shrink: 0;

	color: var(--text-base);

	transition: transform var(--duration-fast) var(--ease-smooth);
}

.px-dropdown__caret svg {
	width: 1.25rem;
	height: 1.25rem;
}

.px-dropdown--open .px-dropdown__caret {
	transform: rotate(180deg);
}

/* Dropdown list */
.px-dropdown__list {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	gap: var(--space-d05);

	position: absolute;
	top: calc(100% + var(--space-d025));
	left: 0;
	right: 0;
	z-index: 10;

	margin: 0;
	padding: var(--space-d025);

	list-style: none;

	border: 1px solid var(--text-base);
	border-radius: var(--radius-xs);

	background-color: var(--sand-light);

	box-shadow: var(--shadow-subtle);
	max-height: 16rem;
	overflow-y: auto;
}

.px-dropdown--open .px-dropdown__list {
	display: flex;
}

/* Dropdown items */
.px-dropdown__item {
	display: flex;
	align-items: center;
	align-self: stretch;

	padding: var(--space-d025) var(--space-d05);

	border-radius: var(--space-d025);

	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
	color: var(--text-base);

	cursor: pointer;
	transition: box-shadow var(--duration-fast) var(--ease-smooth);
}

.px-dropdown__item:hover {
	background-color: var(--white);

	box-shadow: var(--shadow-hover);

	color: var(--action);
	text-decoration: underline;
}

.px-dropdown__item--active {
	background-color: var(--white);

	box-shadow: var(--shadow-hover);

	color: var(--action);
	text-decoration: underline;
}


/* ==========================================================================
   Meerkeuze — alleen actief onder .px-dropdown--multi
   ========================================================================== */

/* De lijst zit in een paneel, zodat het zoekveld boven de scrollende lijst
   blijft staan in plaats van mee te scrollen. */
.px-dropdown--multi .px-dropdown__panel {
	display: none;
	flex-direction: column;
	align-self: stretch;

	position: absolute;
	top: calc(100% + var(--space-d025));
	left: 0;
	right: 0;
	z-index: 10;

	border: 1px solid var(--text-base);
	border-radius: var(--radius-xs);

	background-color: var(--sand-light);

	box-shadow: var(--shadow-subtle);
	overflow: hidden;
}

.px-dropdown--multi.px-dropdown--open .px-dropdown__panel {
	display: flex;
}

/* De lijst zelf verliest zijn eigen paneelopmaak: die zit nu op de wrapper. */
.px-dropdown--multi .px-dropdown__list {
	position: static;
	z-index: auto;
	border: none;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	gap: var(--space-d025);
}

.px-dropdown--multi.px-dropdown--open .px-dropdown__list {
	display: flex;
}

/* Teller op de knop: aantal gekozen opties. */
.px-dropdown__badge {
	flex-shrink: 0;
	min-width: 1.5rem;
	padding: 0 var(--space-d025);

	background-color: var(--action);
	color: var(--white);

	border-radius: var(--radius-pill);
	text-align: center;

	font-family: var(--font-display);
	font-size: var(--text-d075);
	font-weight: var(--weight-semibold);
	line-height: 1.5rem;
}

.px-dropdown__badge[hidden] {
	display: none;
}

/* Zoekveld boven de lijst. */
.px-dropdown__search {
	padding: var(--space-d05) var(--space-d05) var(--space-d025);
}

.px-dropdown__search input {
	width: 100%;
	padding: var(--space-d05) var(--space-d075);

	border: 1px solid var(--gray-mid);
	border-radius: var(--radius-xs);

	background-color: var(--white);

	font-family: var(--font-display);
	font-size: var(--text-d075);
	color: var(--text-base);
}

.px-dropdown__search input:focus-visible {
	outline: none;
	border-color: var(--action);
	box-shadow: 0 0 0 2px var(--blue-light);
}

/* Optieregel: vinkvakje, naam, aantal. */
.px-dropdown--multi .px-dropdown__item {
	gap: var(--space-d05);
}

.px-dropdown--multi .px-dropdown__item:hover,
.px-dropdown--multi .px-dropdown__item--focus,
.px-dropdown--multi .px-dropdown__item[aria-selected="true"] {
	background-color: var(--white);
	box-shadow: var(--shadow-hover);
	color: var(--action);
	text-decoration: none;
}

.px-dropdown__item-text {
	flex: 1;
}

.px-dropdown__item-count {
	flex-shrink: 0;

	font-size: var(--text-d075);
	font-weight: var(--weight-medium);
	color: var(--gray-mid);

	font-variant-numeric: tabular-nums;
}

/* Vinkvakje: hetzelfde vakje als in formulieren, zie base.css sectie 8.
   Dit is een span en geen input, dus de staten hangen aan de optieregel. */
.px-dropdown__check {
	flex-shrink: 0;
	width: 25px;
	height: 25px;

	border-radius: 3px;
	border: 2px solid var(--gray-dark);

	background: var(--white) no-repeat center;
	background-size: 100% 100%;

	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark);

	transition: border-color var(--duration-fast) var(--ease-smooth),
	            box-shadow var(--duration-fast) var(--ease-smooth);
}

.px-dropdown__item:hover .px-dropdown__check,
.px-dropdown__item--focus .px-dropdown__check {
	border-color: var(--action);
	box-shadow: inset 0 0 0 1px var(--action),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark);
}

.px-dropdown__item[aria-selected="true"] .px-dropdown__check {
	border-color: var(--gray-dark);
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 0 var(--white),
	            inset 0 0 0 0 var(--gray-dark);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4.5 4.5 21 21'%3E%3Cpath d='M21.25 7.5H8.75C8.41848 7.5 8.10054 7.6317 7.86612 7.86612C7.6317 8.10054 7.5 8.41848 7.5 8.75V21.25C7.5 21.5815 7.6317 21.8995 7.86612 22.1339C8.10054 22.3683 8.41848 22.5 8.75 22.5H21.25C21.5815 22.5 21.8995 22.3683 22.1339 22.1339C22.3683 21.8995 22.5 21.5815 22.5 21.25V8.75C22.5 8.41848 22.3683 8.10054 22.1339 7.86612C21.8995 7.6317 21.5815 7.5 21.25 7.5ZM18.5672 13.5672L14.1922 17.9422C14.1341 18.0003 14.0652 18.0464 13.9893 18.0779C13.9135 18.1093 13.8321 18.1255 13.75 18.1255C13.6679 18.1255 13.5865 18.1093 13.5107 18.0779C13.4348 18.0464 13.3659 18.0003 13.3078 17.9422L11.4328 16.0672C11.3155 15.9499 11.2497 15.7909 11.2497 15.625C11.2497 15.4591 11.3155 15.3001 11.4328 15.1828C11.5501 15.0655 11.7091 14.9997 11.875 14.9997C12.0409 14.9997 12.1999 15.0655 12.3172 15.1828L13.75 16.6164L17.6828 12.6828C17.7409 12.6247 17.8098 12.5787 17.8857 12.5473C17.9616 12.5158 18.0429 12.4997 18.125 12.4997C18.2071 12.4997 18.2884 12.5158 18.3643 12.5473C18.4402 12.5787 18.5091 12.6247 18.5672 12.6828C18.6253 12.7409 18.6713 12.8098 18.7027 12.8857C18.7342 12.9616 18.7503 13.0429 18.7503 13.125C18.7503 13.2071 18.7342 13.2884 18.7027 13.3643C18.6713 13.4402 18.6253 13.5091 18.5672 13.5672Z' fill='%230093F5'/%3E%3C/svg%3E");
}

/* Niet beschikbaar: nul berichten binnen de andere filters. Zichtbaar laten
   staan in plaats van verbergen, zodat de lijst niet onder je handen
   verspringt. Een aangevinkte optie is nooit uitgeschakeld, anders kun je
   je eigen keuze niet meer weghalen. */
.px-dropdown__item[aria-disabled="true"] {
	opacity: 0.4;
	cursor: default;
}

.px-dropdown__item[aria-disabled="true"]:hover {
	background-color: transparent;
	box-shadow: none;
	color: var(--text-base);
	text-decoration: none;
}

.px-dropdown__item[aria-disabled="true"] .px-dropdown__check {
	border-color: var(--gray-mid);
	box-shadow: inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark);
}

.px-dropdown__item[hidden] {
	display: none;
}

/* Niets gevonden in het zoekveld. */
.px-dropdown__empty {
	margin: 0;
	padding: var(--space-d05) var(--space-d075);

	font-family: var(--font-display);
	font-size: var(--text-d075);
	color: var(--gray-mid);
}

/* Toetsenbordfocus valt op de knop, niet op de losse opties: de lijst is een
   listbox met aria-activedescendant. */
.px-dropdown--multi .px-dropdown__trigger:focus-visible {
	outline: 2px solid var(--action);
	outline-offset: 2px;
}