/*
 * A list that opens under its button: the catalog's sorting and the product page's editions, one look (Kirill,
 * 2026-10-23). The list is a card 8px under its button, with 12px corners, 6px inside and rows with 8px corners; the
 * button's chevron sits after its words, down while the list is closed and up while it is open, one icon fading into
 * the other. Dark by default (the sorting, on the page's colour); .gp-dropdown--light for the editions on the product
 * page's white card. Opening and closing, the keyboard, the sorting's markup: js/dropdown.js. Each list's own button
 * and rows: css/catalog.css (sorting), css/product.css (editions).
 *
 * The sorting's list replaces iOS Safari's own menu for its <select>, which stood 23px below the button, and whose
 * open state a page cannot see, so the chevron could not turn (Kirill, 2026-10-23).
 */
.gp-dropdown {
	--gp-dropdown-chevron: 18px;
	--gp-dropdown-gap: 8px;
	position: relative;
}

.gp-dropdown__button {
	display: inline-flex;
	align-items: center;
	gap: var(--gp-dropdown-gap);
	cursor: pointer;
}

/* The chevron: two icons in one place, the up one laid over the down one, each shown in its state */
.gp-dropdown__button::before,
.gp-dropdown__button::after {
	content: "";
	flex: none;
	order: 1;
	width: var(--gp-dropdown-chevron);
	height: var(--gp-dropdown-chevron);
	background-color: currentColor;
	-webkit-mask: var(--gp-icon-chevron-down) center / var(--gp-dropdown-chevron) no-repeat;
	mask: var(--gp-icon-chevron-down) center / var(--gp-dropdown-chevron) no-repeat;
	transition: opacity var(--gp-hover-out);
}

.gp-dropdown__button::after {
	order: 2;
	margin-left: calc(-1 * (var(--gp-dropdown-chevron) + var(--gp-dropdown-gap)));
	-webkit-mask-image: var(--gp-icon-chevron-up);
	mask-image: var(--gp-icon-chevron-up);
	opacity: 0;
}

.gp-dropdown.is-open .gp-dropdown__button::before {
	opacity: 0;
}

.gp-dropdown.is-open .gp-dropdown__button::after {
	opacity: 1;
}

.gp-dropdown__list {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	box-sizing: border-box;
	min-width: 100%;
	margin: 8px 0 0;
	padding: 6px;
	list-style: none;
	border-radius: 12px;
	background-color: #2c2c2c;
	color: var(--wp--preset--color--primary);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.gp-dropdown__list[hidden] {
	display: none;
}

/* A list under a button at the row's end opens to the left */
.gp-dropdown--end .gp-dropdown__list {
	left: auto;
	right: 0;
}

.gp-dropdown__item {
	display: flex;
	align-items: center;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--gp-hover-out);
}

.gp-dropdown__item:focus-visible {
	outline: none;
	background-color: #3a3a3a;
}

@media (hover: hover) {
	.gp-dropdown__item:hover {
		background-color: #3a3a3a;
		transition-duration: var(--gp-hover-in);
	}
}

.gp-dropdown__item[aria-selected="true"] {
	color: var(--wp--preset--color--accent);
}

.gp-dropdown__item[aria-selected="true"]::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	margin-left: auto;
	background-color: currentColor;
	-webkit-mask: var(--gp-icon-check) center / 18px no-repeat;
	mask: var(--gp-icon-check) center / 18px no-repeat;
}

/* ── Light: on the product page's white card ─────────────────────────────── */

.gp-dropdown--light .gp-dropdown__list {
	background-color: #fff;
	color: var(--wp--preset--color--secondary);
}

.gp-dropdown--light .gp-dropdown__item:focus-visible {
	background-color: var(--wp--preset--color--primary);
}

@media (hover: hover) {
	.gp-dropdown--light .gp-dropdown__item:hover {
		background-color: var(--wp--preset--color--primary);
	}
}