/**
 * Custom select dropdown (assets/js/select-menu.js).
 *
 * The popup mirrors the location-autocomplete menu
 * (assets/css/location-autocomplete.css) so every dropdown on the
 * site shares one visual language. Context styling (pill heights,
 * paddings, fonts) comes from the host block's stylesheet, which
 * targets the `.sghr-menu-btn` alongside the native select.
 */

/* Native select stays in the form for submission only. */
select.sghr-menu-native {
	display: none !important;
}

/* Trigger button: a blank slate — the host block styles it exactly
   like it styled the native select. */
.sghr-menu-btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	margin: 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}

.sghr-menu {
	position: absolute;
	top: calc(100% + 0.375rem);
	/* Span exactly the trigger wrapper — a popup wider than its
	 * trigger looks unanchored, and no option label here needs it. */
	left: 0;
	right: 0;
	z-index: 80;
	margin: 0;
	padding: 0.375rem;
	list-style: none;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.75rem;
	box-shadow: 0 16px 40px rgb(15 35 52 / 0.14);
	max-height: 19rem;
	overflow-y: auto;
}

/*
 * Scrollbar styling, engine-split on purpose: when the standard
 * `scrollbar-width`/`scrollbar-color` properties are set, Chromium
 * ignores ALL `::-webkit-scrollbar*` styling and renders its stock
 * thin scrollbar — arrow buttons included. So Chromium gets the
 * fully-styled ::-webkit scrollbar, and the standard properties are
 * scoped to Firefox (which never supported the ::-webkit pseudos).
 */
.sghr-menu::-webkit-scrollbar {
	width: 10px;
}

.sghr-menu::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--border);
	border-radius: 999px;
	border: 3px solid transparent;
	background-clip: content-box;
}

.sghr-menu::-webkit-scrollbar-button {
	display: none;
}

@supports (-moz-appearance: none) {
	.sghr-menu {
		scrollbar-width: thin;
		scrollbar-color: var(--wp--preset--color--border) transparent;
	}
}

.sghr-menu[hidden] {
	display: none;
}

.sghr-menu__opt {
	margin: 0;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sghr-menu__opt.is-active {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
}

.sghr-menu__opt[aria-selected="true"] {
	font-weight: 600;
}