/*
 * WCAG 2.2 AA colour contrast for the school portals (1.4.3 text 4.5:1, 1.4.11 non-text 3:1).
 *
 * Loaded after the Hyper theme from core/header.html (sign-in and error pages), core/student_header.html
 * (staff and referee pages) and core/student_base.html (student pages). It is the one place the palette is fixed.
 *
 * Every colour keeps its hue and saturation. Only the lightness moves, to the nearest shade that reaches 4.5:1 or more
 * on white, on the page background (#fafbfe), on the grey cards (#f6f7fb) and on its own tinted panel (the theme's
 * *-bg-subtle). The first figure is the ratio on white, the second the ratio on the tinted panel.
 *
 *   creative theme (student, staff, referee pages)        modern theme (sign-in, error pages)
 *   primary #3688fc -> #0465f0  5.1 / 4.6                 primary #536de6 -> #4460e4  5.2 / 4.6
 *   success #42d29d -> #1f805c  4.9 / 4.6                 success #10c469 -> #0a8045  5.0 / 4.6
 *   info    #44badc -> #1c7994  5.0 / 4.6                 info    #35b8e0 -> #177997  5.0 / 4.6
 *   danger  #fa6767 -> #de0707  5.1 / 4.6                 danger  #ff5b5b -> #df0000  5.1 / 4.6
 *   grey text (6c757d at 75% opacity, about 2.9:1) -> #666f76  5.1 on white, 4.6 on the tinted panels
 *   warning: the yellow fill is kept and the text on it is dark (#644b05, 4.8:1); warning text on white is #906b04 (4.9:1)
 *   dark menu text #8391a2 -> #a7b1bd  4.6:1 on #313a46
 *
 * Tenant branding is left alone. core/partials/tenant_theme.html sets --ct-primary, --ct-link-color and the
 * .btn-primary / .btn-outline-primary variables from Settings.institution_colour. It is emitted after this
 * file and the variable blocks below have the same specificity as the tenant's (:where adds none), so a school's
 * colour still wins wherever it is set.
 *
 * Dark mode ([data-bs-theme=dark]) is not touched by the variable blocks above. It has its own block near the end of
 * the file. Form control borders are in a "Form controls" block, with the one value that sets them.
 */

/* Creative theme, light mode. */
:root:where([data-layout=topnav]:not([data-bs-theme=dark])) {
  --ct-primary: #0465f0;
  --ct-primary-rgb: 4, 101, 240;
  --ct-link-color: #0465f0;
  --ct-link-color-rgb: 4, 101, 240;
  --ct-link-hover-color: #0459d3;
  --ct-link-hover-color-rgb: 4, 89, 211;
  --ct-success: #1f805c;
  --ct-success-rgb: 31, 128, 92;
  --ct-info: #1c7994;
  --ct-info-rgb: 28, 121, 148;
  --ct-danger: #de0707;
  --ct-danger-rgb: 222, 7, 7;
  --ct-code-color: #1c7994;
  --a11y-warning-text: #906b04;
}

/* Modern theme (sign-in and error pages). */
:root:where([data-layout-mode=detached]) {
  --ct-primary: #4460e4;
  --ct-primary-rgb: 68, 96, 228;
  --ct-link-color: #4460e4;
  --ct-link-color-rgb: 68, 96, 228;
  --ct-link-hover-color: #3c54c9;
  --ct-link-hover-color-rgb: 60, 84, 201;
  --ct-success: #0a8045;
  --ct-success-rgb: 10, 128, 69;
  --ct-info: #177997;
  --ct-info-rgb: 23, 121, 151;
  --ct-danger: #df0000;
  --ct-danger-rgb: 223, 0, 0;
  --ct-code-color: #177997;
  --a11y-warning-text: #936a05;
}

/* Grey text. The theme draws muted text, hints, breadcrumbs, placeholders and the footer from 75% #6c757d. */
:root:where([data-layout=topnav]:not([data-bs-theme=dark])),
:root:where([data-layout-mode=detached]) {
  --ct-body-color: #666f76;
  --ct-body-color-rgb: 102, 111, 118;
  --ct-secondary: #666f76;
  --ct-secondary-rgb: 102, 111, 118;
  --ct-secondary-color: #666f76;
  --ct-secondary-color-rgb: 102, 111, 118;
  --ct-emphasis-color: #666f76;
  --ct-emphasis-color-rgb: 102, 111, 118;
}

/* Dark mode keeps the theme's amber for warning text. */
:root[data-bs-theme=dark] {
  --a11y-warning-text: var(--ct-warning);
}

/* Dark menu bar: the theme's #8391a2 reaches only 3.6:1 on #313a46. */
html[data-menu-color=dark],
html[data-bs-theme=dark][data-menu-color=dark],
html[data-bs-theme=dark][data-menu-color=light] {
  --ct-menu-item-color: #a7b1bd;
}

/* Dark mode topbar text: the theme sets #8391a2 (3.0:1 on #3a444e) on <html> itself, so :root:where() cannot reach it. */
html[data-bs-theme=dark][data-topbar-color=dark],
html[data-bs-theme=dark][data-topbar-color=light] {
  --ct-topbar-item-color: #b7c0c9;
}

/* Component variables the theme sets to the brand hex instead of --ct-primary. */
.nav-pills { --ct-nav-pills-link-active-bg: var(--ct-primary); }
.pagination {
  --ct-pagination-active-bg: var(--ct-primary);
  --ct-pagination-active-border-color: var(--ct-primary);
}
.list-group {
  --ct-list-group-active-bg: var(--ct-primary);
  --ct-list-group-active-border-color: var(--ct-primary);
}
.progress,
.progress-stacked { --ct-progress-bar-bg: var(--ct-primary); }
html[data-topbar-color=light] { --ct-topbar-item-hover-color: var(--ct-primary); }
html[data-menu-color=light] {
  --ct-menu-item-hover-color: var(--ct-primary);
  --ct-menu-item-active-color: var(--ct-primary);
}

/*
 * The theme hard-codes the brand hex in each button and in .text-bg-*, so they are rebuilt from the variables above.
 * In dark mode the variables keep the theme's values, so these rules redraw the same colours there.
 */
.btn-primary,
.btn-success,
.btn-info,
.btn-danger {
  --ct-btn-hover-color: #fff;
  --ct-btn-active-color: #fff;
}
.btn-primary {
  --ct-btn-bg: var(--ct-primary);
  --ct-btn-border-color: var(--ct-primary);
  --ct-btn-hover-bg: color-mix(in srgb, var(--ct-primary) 88%, #000);
  --ct-btn-hover-border-color: color-mix(in srgb, var(--ct-primary) 88%, #000);
  --ct-btn-active-bg: color-mix(in srgb, var(--ct-primary) 88%, #000);
  --ct-btn-active-border-color: color-mix(in srgb, var(--ct-primary) 88%, #000);
  --ct-btn-disabled-bg: var(--ct-primary);
  --ct-btn-disabled-border-color: var(--ct-primary);
}
.btn-success {
  --ct-btn-bg: var(--ct-success);
  --ct-btn-border-color: var(--ct-success);
  --ct-btn-hover-bg: color-mix(in srgb, var(--ct-success) 88%, #000);
  --ct-btn-hover-border-color: color-mix(in srgb, var(--ct-success) 88%, #000);
  --ct-btn-active-bg: color-mix(in srgb, var(--ct-success) 88%, #000);
  --ct-btn-active-border-color: color-mix(in srgb, var(--ct-success) 88%, #000);
  --ct-btn-disabled-bg: var(--ct-success);
  --ct-btn-disabled-border-color: var(--ct-success);
}
.btn-info {
  --ct-btn-bg: var(--ct-info);
  --ct-btn-border-color: var(--ct-info);
  --ct-btn-hover-bg: color-mix(in srgb, var(--ct-info) 88%, #000);
  --ct-btn-hover-border-color: color-mix(in srgb, var(--ct-info) 88%, #000);
  --ct-btn-active-bg: color-mix(in srgb, var(--ct-info) 88%, #000);
  --ct-btn-active-border-color: color-mix(in srgb, var(--ct-info) 88%, #000);
  --ct-btn-disabled-bg: var(--ct-info);
  --ct-btn-disabled-border-color: var(--ct-info);
}
.btn-danger {
  --ct-btn-bg: var(--ct-danger);
  --ct-btn-border-color: var(--ct-danger);
  --ct-btn-hover-bg: color-mix(in srgb, var(--ct-danger) 88%, #000);
  --ct-btn-hover-border-color: color-mix(in srgb, var(--ct-danger) 88%, #000);
  --ct-btn-active-bg: color-mix(in srgb, var(--ct-danger) 88%, #000);
  --ct-btn-active-border-color: color-mix(in srgb, var(--ct-danger) 88%, #000);
  --ct-btn-disabled-bg: var(--ct-danger);
  --ct-btn-disabled-border-color: var(--ct-danger);
}

.btn-outline-primary {
  --ct-btn-color: var(--ct-primary);
  --ct-btn-border-color: var(--ct-primary);
  --ct-btn-hover-bg: var(--ct-primary);
  --ct-btn-hover-border-color: var(--ct-primary);
  --ct-btn-active-bg: var(--ct-primary);
  --ct-btn-active-border-color: var(--ct-primary);
  --ct-btn-disabled-color: var(--ct-primary);
  --ct-btn-disabled-border-color: var(--ct-primary);
}
.btn-outline-secondary {
  --ct-btn-color: var(--ct-secondary);
  --ct-btn-border-color: var(--ct-secondary);
  --ct-btn-hover-bg: var(--ct-secondary);
  --ct-btn-hover-border-color: var(--ct-secondary);
  --ct-btn-active-bg: var(--ct-secondary);
  --ct-btn-active-border-color: var(--ct-secondary);
  --ct-btn-disabled-color: var(--ct-secondary);
  --ct-btn-disabled-border-color: var(--ct-secondary);
}
.btn-outline-success {
  --ct-btn-color: var(--ct-success);
  --ct-btn-border-color: var(--ct-success);
  --ct-btn-hover-bg: var(--ct-success);
  --ct-btn-hover-border-color: var(--ct-success);
  --ct-btn-active-bg: var(--ct-success);
  --ct-btn-active-border-color: var(--ct-success);
  --ct-btn-disabled-color: var(--ct-success);
  --ct-btn-disabled-border-color: var(--ct-success);
}
.btn-outline-info {
  --ct-btn-color: var(--ct-info);
  --ct-btn-border-color: var(--ct-info);
  --ct-btn-hover-bg: var(--ct-info);
  --ct-btn-hover-border-color: var(--ct-info);
  --ct-btn-active-bg: var(--ct-info);
  --ct-btn-active-border-color: var(--ct-info);
  --ct-btn-disabled-color: var(--ct-info);
  --ct-btn-disabled-border-color: var(--ct-info);
}
.btn-outline-danger {
  --ct-btn-color: var(--ct-danger);
  --ct-btn-border-color: var(--ct-danger);
  --ct-btn-hover-bg: var(--ct-danger);
  --ct-btn-hover-border-color: var(--ct-danger);
  --ct-btn-active-bg: var(--ct-danger);
  --ct-btn-active-border-color: var(--ct-danger);
  --ct-btn-disabled-color: var(--ct-danger);
  --ct-btn-disabled-border-color: var(--ct-danger);
}

/* Yellow stays as the fill. White text on it is 1.7:1, so the text is dark and text on white is a darker amber. */
.btn-warning {
  --ct-btn-color: #644b05;
  --ct-btn-hover-color: #644b05;
  --ct-btn-active-color: #644b05;
  --ct-btn-disabled-color: #644b05;
}
.btn-outline-warning {
  --ct-btn-color: var(--a11y-warning-text, #906b04);
  --ct-btn-hover-color: #644b05;
  --ct-btn-active-color: #644b05;
  --ct-btn-disabled-color: var(--a11y-warning-text, #906b04);
}
.text-warning {
  color: var(--a11y-warning-text, #906b04) !important;
}
.text-bg-warning {
  color: #644b05 !important;
}

.text-bg-primary { background-color: rgba(var(--ct-primary-rgb), var(--ct-bg-opacity, 1)) !important; }
.text-bg-success { background-color: rgba(var(--ct-success-rgb), var(--ct-bg-opacity, 1)) !important; }
.text-bg-info { background-color: rgba(var(--ct-info-rgb), var(--ct-bg-opacity, 1)) !important; }
.text-bg-danger { background-color: rgba(var(--ct-danger-rgb), var(--ct-bg-opacity, 1)) !important; }

/* Select2 draws its placeholder in #999 (2.8:1) on a white box, in dark mode too. */
html .select2-container--default .select2-selection--single .select2-selection__placeholder,
html .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: #666f76;
}

/*
 * Floating labels are drawn at 65% of the body colour once they sit above the value (about 2.8:1 on white).
 * axe cannot test them because the label overlaps its input, so this was found by reading the theme's CSS.
 */
html:not([data-bs-theme=dark]) .form-floating > label,
html:not([data-bs-theme=dark]) .form-floating > .form-control:focus ~ label,
html:not([data-bs-theme=dark]) .form-floating > .form-control:not(:placeholder-shown) ~ label,
html:not([data-bs-theme=dark]) .form-floating > .form-control:-webkit-autofill ~ label,
html:not([data-bs-theme=dark]) .form-floating > .form-control-plaintext ~ label,
html:not([data-bs-theme=dark]) .form-floating > .form-select ~ label {
  color: var(--ct-secondary-color, #666f76);
}
html:not([data-bs-theme=dark]) .form-floating > :disabled ~ label {
  color: #8a969c;
}

/*
 * Form controls (WCAG 1.4.11 non-text contrast, 3:1).
 *
 * The theme draws the edge of every input, select, textarea, checkbox, radio and input-group addon in the divider
 * grey #dee2e6, which is about 1.2:1 on the white cards and the #f6f7fb page. The edge is the only thing that marks
 * where a field is, so it needs 3:1 against both of those. Dividers, table rules and card edges keep #dee2e6.
 *
 * One value controls all of it: --p16-control-border.
 *   #879198  3.2:1 on #fff, 3.0:1 on #f6f7fb, 3.1:1 on #fafbfe  the lightest grey of the theme's own hue that passes
 *   #666f76  5.1:1 on #fff, 4.8:1 on #f6f7fb, 5.0:1 on #fafbfe  the muted text grey used elsewhere in this file
 *
 * Focus stays clearly different from rest: the border takes the primary colour (the school's colour when one is
 * set) on top of the focus ring from accessibility.css and student.css. Error borders (.is-invalid) and disabled
 * fields (exempt from 1.4.11) are left to the theme. Checked boxes already fill with the primary colour.
 */
:root {
  --p16-control-border: #666f76;
}

:where(
  .form-control,
  .form-select,
  .input-group-text,
  .dt-container .dt-input,
  .dt-container .dt-search input
):not(:disabled) {
  border-color: var(--p16-control-border);
}
:where(.form-control, .form-select, .dt-container .dt-input, .dt-container .dt-search input):focus:not(:disabled) {
  border-color: var(--ct-primary);
}

/* Unchecked checkboxes, radios and switch tracks. A checked one is filled, so it keeps the theme's primary border. */
.form-check-input:not(:checked):not(:indeterminate):not(:disabled) {
  border-color: var(--p16-control-border);
}
.form-check-input:not(:checked):not(:indeterminate):focus:not(:disabled) {
  border-color: var(--ct-primary);
}

/*
 * Select2. The theme sets the multi-select border with !important. select2.min.css loads after this file on some
 * layouts and draws #aaa (2.3:1), so the single-select rule is raised a little to still win.
 */
html .select2-container--default .select2-selection--single {
  border-color: var(--p16-control-border);
}
html .select2-container--default .select2-selection--multiple {
  border-color: var(--p16-control-border) !important;
}
html .select2-container--default.select2-container--focus .select2-selection--single,
html .select2-container--default.select2-container--open .select2-selection--single,
html .select2-container--default.select2-container--focus .select2-selection--multiple,
html .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--ct-primary) !important;
}

/*
 * Dark mode ([data-bs-theme=dark], a per-user setting on core/settings.html, available to staff, students and referees).
 *
 * The theme's dark palette keeps its hues. Only lightness moves, to the nearest shade that reaches 4.5:1 (3:1 for
 * borders and other UI) on all four dark surfaces: the page #343a40, the cards #37404a, the inputs #404954 and
 * the bg-light / table-light panels #464f5b (the darkest surface for text, so it sets the minimum).
 *
 *   body text         #aab8c5 (4.1 on #464f5b)  -> #c3cdd7  5.6
 *   muted text        #8391a2 (2.6 on #464f5b)  -> #b7c0c9  4.5   hints, breadcrumbs, placeholders, labels
 *   links             #86b8fd (4.1 on #464f5b)  -> #97c2fd  4.6
 *   topbar text       #8391a2 (3.0 on #3a444e)  -> #b7c0c9  4.8
 *   form borders      #464f5b (1.1 on #37404a)  -> #909dac  3.0 on #464f5b, 4.2 on the cards (--p16-control-border)
 *   status text       success #8ee4c4, info #8fd6ea, warning #f9bc0d are already above 4.5:1 and are used for all
 *                     status text; danger #fa6767 (2.9 on #464f5b) -> #fca9a9  4.6
 *
 * Solid fills carrying white text were 1.9 to 3.5:1. They take the same solids as light mode (see the palette at
 * the top): primary #0465f0, success #1f805c, info #1c7994, danger #de0707, each 4.9 to 5.2:1 with white text.
 *
 * Tenant branding: core/partials/tenant_theme.html sets --ct-primary, --ct-link-color and the .btn-primary and
 * .btn-outline-primary variables from :root after this file, at the same specificity as the :where() selectors
 * below, so a school's colour still wins in dark mode too. Those values are not the raw school colour: they are
 * computed in core/logic/brand_colours.py to reach 4.5:1 (fills darkened for white text, links and outline text
 * lightened for the dark surfaces). Lighter tints derived from them (text-primary, soft buttons, the focus border)
 * are mixed from those values, and the keyboard focus ring uses a fixed light blue instead of the school colour.
 */
:root:where([data-bs-theme=dark]) {
  --ct-body-color: #c3cdd7;
  --ct-body-color-rgb: 195, 205, 215;
  --ct-heading-color: #c3cdd7;
  --ct-secondary-color: #b7c0c9;
  --ct-secondary-color-rgb: 183, 192, 201;
  --ct-link-color: #97c2fd;
  --ct-link-color-rgb: 151, 194, 253;
  --ct-link-hover-color: #aacdfd;
  --ct-link-hover-color-rgb: 170, 205, 253;
  --ct-primary-text-emphasis: #97c2fd;
  --ct-danger-text-emphasis: #fca9a9;
  --ct-primary: #0465f0;
  --ct-primary-rgb: 4, 101, 240;
  --p16-control-border: #909dac;
  --p16-primary-text: color-mix(in srgb, var(--ct-primary) 40%, #fff);
}

/* Text drawn in a status colour reads from the lighter text tints, not from the fill colours. */
:where([data-bs-theme=dark]) .text-primary { color: var(--p16-primary-text) !important; }
:where([data-bs-theme=dark]) .text-success { color: var(--ct-success-text-emphasis) !important; }
:where([data-bs-theme=dark]) .text-info { color: var(--ct-info-text-emphasis) !important; }
:where([data-bs-theme=dark]) .text-danger { color: var(--ct-danger-text-emphasis) !important; }
:where([data-bs-theme=dark]) .text-secondary { color: var(--ct-secondary-color) !important; }

/* Solid fills with white text: the light-mode solids. The variables are set on the element itself. */
:where([data-bs-theme=dark]) :is(.btn-success, .text-bg-success, .badge.bg-success) {
  --ct-success: #1f805c;
  --ct-success-rgb: 31, 128, 92;
}
:where([data-bs-theme=dark]) :is(.btn-info, .text-bg-info, .badge.bg-info) {
  --ct-info: #1c7994;
  --ct-info-rgb: 28, 121, 148;
}
:where([data-bs-theme=dark]) :is(.btn-danger, .text-bg-danger, .badge.bg-danger) {
  --ct-danger: #de0707;
  --ct-danger-rgb: 222, 7, 7;
}

/* Outline and soft buttons draw their text in the status colour on a dark surface. */
:where([data-bs-theme=dark]) .btn-outline-primary:not(.disabled):not(:disabled),
:where([data-bs-theme=dark]) .btn-soft-primary { --ct-btn-color: var(--p16-primary-text); }
:where([data-bs-theme=dark]) .btn-outline-success,
:where([data-bs-theme=dark]) .btn-soft-success { --ct-btn-color: var(--ct-success-text-emphasis); }
:where([data-bs-theme=dark]) .btn-outline-info,
:where([data-bs-theme=dark]) .btn-soft-info { --ct-btn-color: var(--ct-info-text-emphasis); }
:where([data-bs-theme=dark]) .btn-outline-danger,
:where([data-bs-theme=dark]) .btn-soft-danger { --ct-btn-color: var(--ct-danger-text-emphasis); }
:where([data-bs-theme=dark]) .btn-outline-secondary,
:where([data-bs-theme=dark]) .btn-soft-secondary {
  --ct-btn-color: var(--ct-secondary-color);
  --ct-btn-border-color: var(--ct-secondary-color);
}
:where([data-bs-theme=dark]) .btn-outline-secondary:hover,
:where([data-bs-theme=dark]) .btn-outline-secondary:active { --ct-btn-border-color: #6c757d; }

/* Form controls: the same rules as light mode, with the dark border and a lighter focus border. */
:where([data-bs-theme=dark]) :where(.form-control, .form-select, .dt-container .dt-input, .dt-container .dt-search input):focus:not(:disabled),
:where([data-bs-theme=dark]) .form-check-input:not(:checked):not(:indeterminate):focus:not(:disabled) {
  border-color: var(--p16-primary-text);
}
html[data-bs-theme=dark] .select2-container--default.select2-container--focus .select2-selection--single,
html[data-bs-theme=dark] .select2-container--default.select2-container--open .select2-selection--single,
html[data-bs-theme=dark] .select2-container--default.select2-container--focus .select2-selection--multiple,
html[data-bs-theme=dark] .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--p16-primary-text) !important;
}

/* The student pages draw their keyboard focus ring in the school colour, which can be too dark on the dark surfaces. */
html[data-bs-theme=dark] :focus-visible { outline-color: #97c2fd; box-shadow: 0 0 0 2px #343a40; }

/* Select2 and floating labels: light mode sets these colours for white boxes, which are #666f76 on #404954 here. */
html[data-bs-theme=dark] .select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-bs-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: var(--ct-secondary-color);
}
html[data-bs-theme=dark] .form-floating > label,
html[data-bs-theme=dark] .form-floating > .form-control:focus ~ label,
html[data-bs-theme=dark] .form-floating > .form-control:not(:placeholder-shown) ~ label,
html[data-bs-theme=dark] .form-floating > .form-control:-webkit-autofill ~ label,
html[data-bs-theme=dark] .form-floating > .form-control-plaintext ~ label,
html[data-bs-theme=dark] .form-floating > .form-select ~ label {
  color: var(--ct-secondary-color);
}

/* Readonly fields set an inline light grey background (core/forms.py), which leaves light text on light grey here. */
html[data-bs-theme=dark] .form-control[style*="#f6f7fb"] {
  background-color: var(--ct-tertiary-bg) !important;
}

/* Text on the tinted panels (bg-*-lighten): body and muted text are 3.1:1 on the amber and teal tints. */
html[data-bs-theme=dark] :is(.bg-warning-lighten, .bg-info-lighten, .bg-success-lighten, .bg-danger-lighten, .bg-primary-lighten) .text-muted {
  color: #fff !important;
}

/* An outline button on a tinted alert panel. Muted text is 4.3:1 on the green tint, body text is 4.9:1. */
html[data-bs-theme=dark] .btn-outline-secondary { --ct-btn-color: var(--ct-body-color); }

/* Uppy (the logo, favicon and background uploaders) draws its note and credit in #757575 and #939393 on #f4f4f4, in both modes. */
html .uppy-Dashboard-note { color: #666666; }
html a.uppy-Dashboard-poweredBy,
html .uppy-Dashboard-poweredByUppy { color: #6b6b6b; }
html .uppy-Dashboard-poweredByIcon { stroke: #6b6b6b; }

/*
 * Select2 on the staff pages. select2.min.css loads after the theme there and paints white boxes, #444 text and a
 * #5897fb highlight (white on it is 3.0:1) in both modes. The highlight takes the primary fill. In dark mode the box,
 * the dropdown and the text are given the theme's input colours back (the white box with pale text was unreadable).
 */
html .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--ct-primary);
  color: #fff;
}
html .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--p16-control-border) transparent transparent transparent;
}
html .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--p16-control-border) transparent !important;
}
html[data-bs-theme=dark] .select2-container--default .select2-selection--single,
html[data-bs-theme=dark] .select2-container--default .select2-selection--multiple {
  background-color: var(--ct-input-bg);
}
html[data-bs-theme=dark] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-bs-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: var(--ct-body-color);
}
html[data-bs-theme=dark] .select2-dropdown {
  background-color: var(--ct-input-bg);
  border-color: var(--p16-control-border);
  color: var(--ct-body-color);
}
html[data-bs-theme=dark] .select2-container--default .select2-results__option--selectable {
  color: var(--ct-body-color);
}
html[data-bs-theme=dark] .select2-container--default .select2-results__option--selected {
  background-color: var(--ct-light);
}
html[data-bs-theme=dark] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  color: #fff;
}
html[data-bs-theme=dark] .select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: var(--p16-control-border);
}