/**
 * Classic theme on top of select2-bootstrap-5-theme: recreates the retired
 * bootstrap-select look (WCAG WP-C.3) — btn-default closed box, brand-blue selected
 * row, light-grey hover. Load AFTER select2-bootstrap-5-theme.min.css.
 */

/* Closed box: old .btn-default scheme */
.select2-container--bootstrap-5 .select2-selection {
	color: #333;
	border-color: #ccc;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
	background-color: #e6e6e6;
	border-color: #8c8c8c;
}

/* Panel: light-grey hover, brand-blue selected row. #286090 is $color-3, the colour
   main.scss gave .bootstrap-select .dropdown-item.active (white on it is 6.7:1).
   Selectors mirror the bs5 theme's exact specificity; this file loads after it.
   Note: aria-selected="true" tracks the HOVERED row in this Select2 build, so it
   belongs with the hover rule; the chosen row is .select2-results__option--selected,
   whose rule comes last so it stays blue even while hovered. */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"] {
	background-color: #e9ecef;
	color: #333;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected {
	background-color: #286090;
	color: #fff;
}

/* Click feedback: blue while the mouse is down on an option, like the old widget */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option:active {
	background-color: #286090;
	color: #fff;
}

/* Old look: small gap between the box and the menu, rounded corners kept on both
   (the bs5 theme glues them together — these restore the detached menu) */
.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--below {
	margin-top: 7px;
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
}

.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--above {
	margin-bottom: 7px;
	border-bottom-left-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
}

.select2-container--bootstrap-5 .select2-dropdown {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
}

.select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection {
	border-bottom: 1px solid #8c8c8c;
	border-bottom-left-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
}

.select2-container--bootstrap-5.select2-container--open.select2-container--above .select2-selection {
	border-top: 1px solid #8c8c8c;
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
}