/******************************************************************
Dropdown (style handle mediaschneider-dropdown)

Styled filter dropdown of the Team block (filter «Position», Group 460) and the
Einblicke-Übersicht (filter «Kategorie», Group 576): a navy button with a chevron
and a list of options below it. Not a browser <select>: the client wants it styled.

Markup: .ms-dropdown > button.ms-dropdown__toggle (.ms-dropdown__label, svg.ms-dropdown__chevron)
        + ul.ms-dropdown__options > li > .ms-dropdown__option (button or link).
Open: .is-open on .ms-dropdown (set by the block's view.js); the list fades in, the chevron turns.
Chosen option: aria-pressed="true" (buttons) or aria-current="true" (links).
******************************************************************/

.ms-dropdown {
	position: relative;
	z-index: 2; /* the open list lies over the content below */
	inline-size: fit-content;
	font-size: var(--ms-fs-text-large);
	line-height: 1.25rem;
}

/* Navy box, white text and chevron (16 × 8px, 10px after the text, 5px from the end). */
.ms-dropdown__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	block-size: var(--ms-dropdown-height);
	padding-block: 0;
	padding-inline: 0.375rem 0.3125rem;
	font: inherit;
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--navy);
	border: 0;
	border-radius: 0;
	cursor: pointer;

	&:focus-visible {
		outline: 2px solid var(--wp--preset--color--navy);
		outline-offset: 2px;
	}
}

.ms-dropdown__chevron {
	flex: none;
	inline-size: var(--ms-dropdown-chevron);
	block-size: auto;
	fill: none; /* the reset fills SVGs with currentColor */
	transition: rotate 0.2s ease-in-out;

	.is-open & {
		rotate: 180deg;
	}
}

/* At least as wide as the button; hidden (and out of the tab order) until opened. */
.ms-dropdown__options {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	min-inline-size: 100%;
	margin: 0;
	padding: 0.375rem 0;
	list-style: none;
	background-color: var(--wp--preset--color--navy);
	box-shadow: 0 5px 10px rgb(0 0 0 / 0.16);
	visibility: hidden;
	opacity: 0;
	translate: 0 -0.25rem;
	transition: opacity 0.2s ease-out, translate 0.2s ease-out, visibility 0s linear 0.2s;

	.is-open & {
		visibility: visible;
		opacity: 1;
		translate: 0 0;
		transition: opacity 0.2s ease-out, translate 0.2s ease-out, visibility 0s;
	}
}

.ms-dropdown__option {
	display: block;
	inline-size: 100%;
	padding: 0.5rem 1.25rem 0.5rem 0.375rem; /* 36px per option */
	font: inherit;
	color: var(--wp--preset--color--white);
	text-align: start;
	text-decoration: none;
	white-space: nowrap;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;

	&:hover,
	&:focus-visible {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

	&:focus-visible {
		outline: 1px solid var(--wp--preset--color--white);
		outline-offset: -3px;
	}

	/* The chosen option */
	&:is([aria-pressed="true"], [aria-current="true"]) {
		font-weight: 600;
		color: var(--wp--preset--color--blue);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ms-dropdown__chevron,
	.ms-dropdown__options {
		transition: none;
	}
}