/* =============================================================================
 * Select2 — ArneIron skin
 * -----------------------------------------------------------------------------
 * Select2 ships a 2012-era grey-and-blue look that matches nothing in this
 * design system. Rather than fork the vendored CSS (which would have to be
 * re-forked on every upgrade), this sheet loads AFTER `select2.min.css` and
 * restates only what the theme owns: the control, the dropdown, and the states.
 *
 * Every value comes from a §1 token, so a Style Variation repaints the control
 * for free — the same contract the rest of the theme's chrome follows.
 *
 * The target is the FORM CONTROL in ds.css §9:
 *     min-height 44px, padding space-3/space-4, 1px border, r-sm radius,
 *     focus = accent border + 3px accent ring
 * Select2 must be indistinguishable from a native input sitting next to it, or
 * a form with one enhanced select and one plain input looks broken.
 * ========================================================================== */

/* ---- The closed control --------------------------------------------------- */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	box-sizing: border-box;
	min-height: 44px;                 /* == ds.css §9 touch target */
	padding: var(--space-3) var(--space-4);
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	color: var(--c-ink);
	font: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
	display: flex;
	align-items: center;
}

/* Select2 positions the single-select label and arrow absolutely and sets its
   own line-height; both fight the padding above. Reset them and let flex do it. */
.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: inherit;
	color: inherit;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	position: static;
	height: auto;
	width: auto;
	margin-inline-start: auto;        /* pin right without absolute positioning */
}

/* Its arrow is a CSS-triangle border trick. Replace it with a chevron that
   matches core's navigation submenu icon, in currentColor. */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	position: static;
	margin: 0;
	border: 0;
	width: 12px;
	height: 12px;
	background: currentColor;
	color: var(--c-ink-3);
	-webkit-mask: var(--arneiron-select-chevron) center / 12px 12px no-repeat;
	mask: var(--arneiron-select-chevron) center / 12px 12px no-repeat;
}
:root {
	--arneiron-select-chevron: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M1.5 4L6 8l4.5-4" fill="none" stroke="black" stroke-width="1.5"/></svg>');
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--c-ink-3);
}

/* ---- States --------------------------------------------------------------- */

/* Select2 moves focus to its own element, so `:focus-visible` on the <select>
   never fires — the open state is the only reliable focus signal. */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 25%, transparent);
	outline: none;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
	background: var(--c-surface);
	color: var(--c-ink-3);
	cursor: not-allowed;
}

/* ---- The dropdown --------------------------------------------------------- */

.select2-container--default .select2-dropdown {
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
	overflow: hidden;
}

.select2-container--default .select2-results__option {
	padding: var(--space-2) var(--space-4);
	color: var(--c-ink-2);
	font-size: var(--wp--preset--font-size--sm);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--c-surface);
	color: var(--c-ink);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: transparent;
	color: var(--c-accent-strong);
	font-weight: 600;
}

/* ---- Search field inside the dropdown ------------------------------------- */

.select2-container--default .select2-search--dropdown {
	padding: var(--space-2);
	border-bottom: 1px solid var(--c-border);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
	min-height: 36px;                 /* nested control: smaller than the §9 44px */
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	background: var(--c-bg);
	color: var(--c-ink);
	font: inherit;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
	border-color: var(--c-accent);
	outline: none;
}

/* ---- Multiple ------------------------------------------------------------- */

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	color: var(--c-ink);
	padding: 0 var(--space-2);
	margin: 2px var(--space-1) 2px 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: var(--c-ink-3);
	border: 0;
	background: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: var(--c-danger, var(--c-ink));
	background: none;
}

/* ---- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.select2-container--default .select2-selection--single,
	.select2-container--default .select2-selection--multiple {
		transition: none;
	}
}