/**
 * 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;
	text-align: left; /* like the old .bootstrap-select .btn; a right-aligned column must not shift the value */
}

.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;
}

/* Fit-to-content hook (select2Init.js .nb-select2-auto, select tagged "w-auto"):
   Select2 copies the native select's measured width, i.e. its longest option, so
   box and panel match and no option wraps. The bs5 theme makes the container
   display:block, which would ignore the column's text-align; inline-block keeps
   it right-alignable. Select2 inserts its container right after the <select>,
   hence the sibling selector. */
select.nb-select2-auto + .select2-container--bootstrap-5 {
	display: inline-block;
}

select.nb-select2-auto + .select2-container--bootstrap-5 .select2-selection {
	width: auto;
}

/* 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;
}