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

/* Arrow: the old solid caret (Bootstrap 4 .dropdown-toggle::after, 0.6em x 0.3em) instead of
   the bs5 theme's thin chevron. Same box as the theme's image (16x12), so position/size stay. */
.select2-container--bootstrap-5 .select2-selection--single {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23333' d='M3 5l5 6 5-6z'/%3e%3c/svg%3e");
}

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

/* Only the top-level list scrolls. The bs5 theme caps every .select2-results__options at
   15rem, which also catches the nested list inside an <optgroup>, so a long group got a
   second scrollbar inside the scrolling menu (bootstrap-select showed one, data-size rows). */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__options--nested {
	max-height: none;
	overflow-y: visible;
}

/* Groups, old proportions: the heading is Bootstrap 4's .dropdown-header (small, muted,
   same inset as plain options, a little air above) and the options under it are indented
   2.25em like bootstrap-select's a.opt. The bs5 theme put the heading left of its own options. */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role="group"] .select2-results__group {
	padding: 0.5rem 0.75rem 0.25rem;
	font-size: 0.875rem;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role="group"] .select2-results__options--nested .select2-results__option {
	padding-left: 2.25em;
}

/* Click feedback: blue while the mouse is down on an option, like the old widget.
   Selectable options only: an <optgroup> is itself a .select2-results__option wrapping
   its options, and :active matches ancestors, so without the modifier the whole group
   flashed when one of its options was pressed. */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selectable: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;
}