/*
 * Makes the select2 widget look like the surrounding form inputs.
 *
 * select2's own stylesheet is already in the admin CSS bundle, but it ships the library's
 * default look: 28px tall, white, 1px grey border, 4px radius. The inputs on these pages are
 * 49px, brand-green, borderless with a 20px radius, so the two sat side by side looking
 * unrelated.
 *
 * Values come from the FancyAdmin design tokens (--inputBackground / --inputFocusBackground /
 * --inputBorder, set from config/common.neon `fancyAdmin.colors`) rather than literal colours,
 * so a palette change carries over. Geometry (49px / 20px / 15px) is measured from the real
 * inputs — there are no tokens for it.
 *
 * Loaded together with www/js/select2-init.js; see that file for why select2 is vendored.
 */

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

.container-login .select2-container--default .select2-selection--single {
	box-sizing: border-box;
	height: 49px;
	padding: 15px;
	background: var(--inputBackground);
	border: var(--inputBorder, 0);
	border-radius: 20px;
}

.container-login .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 18px;
	color: #333;
}

/* Keep the arrow centred against the taller control. */
.container-login .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 47px;
	right: 10px;
}

/* Open and focused both mirror the inputs' focus styling. */
.container-login .select2-container--default.select2-container--open .select2-selection--single,
.container-login .select2-container--default.select2-container--focus .select2-selection--single {
	background: var(--inputFocusBackground);
	border: var(--inputFocusBorder, 0);
}

/*
 * select2 squares off the control's corners while open, so it visually joins the dropdown.
 * With these pill-shaped inputs that reads as the field changing shape on click, so the radius
 * is kept. Both --below and --above are listed because select2's own rules are that specific,
 * and a shorter selector would lose the specificity contest.
 */
.container-login .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.container-login .select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
	border-radius: 20px;
}

/* --- The dropdown -------------------------------------------------------------------- */
/* select2 appends this to <body>, so it cannot be scoped under .container-login. Harmless:
   these pages are the only place select2 is used. */

.select2-container--default .select2-dropdown {
	border: 0;
	border-radius: 20px;
	overflow: hidden;
}

/*
 * Transparent rather than a colour of its own, so the field always shows the dropdown's
 * background and the two cannot drift apart. It must NOT reuse --inputBackground like the
 * closed control does: that token is the brand green, which is also the <body> background, so
 * the search box read as a hole punched through to the page rather than part of the dropdown.
 */
.select2-container--default .select2-search--dropdown .select2-search__field {
	box-sizing: border-box;
	padding: 10px 15px;
	background: transparent;
	color: #333;
	/* Sharing the dropdown's background leaves nothing to see, so a hairline separates the
	   field from the results below it. */
	border: 0;
	border-bottom: 1px solid var(--ternaryColor, #B3B3B3);
}

/*
 * The real inputs suppress the browser focus ring and signal focus by changing background.
 * Left on, it draws a hard black rectangle around a field that is otherwise flush with the
 * dropdown — which is what made the search box look bolted on.
 */
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	outline: 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--primaryColor);
}