/**
 * WCAG 2.1 AA contrast fix for Drupal's "toggle switch" boolean checkbox
 * style (used on the Extend page's module-install controls, and on other
 * boolean widgets such as the content Status field).
 *
 * Verified contrast ratios (WCAG 2.1 SC 1.4.11 Non-text Contrast requires
 * 3:1 for UI components against their adjacent background):
 *   - OFF track (#ffffff) with #343537 border vs page background: 12.28:1
 *   - OFF knob (#343537) vs OFF track (#ffffff):                  12.28:1
 *   - ON track (#294779) vs page background:                       9.24:1
 *   - ON knob (#ffffff) vs ON track (#294779):                     9.24:1
 *
 * ON and OFF are distinguished by fill style (hollow vs. solid) as well as
 * color, not color alone, so the state reads correctly for colorblind
 * users too.
 *
 * `form-boolean--type-checkbox` is the class Drupal core (9.6+) uses to
 * render a checkbox as a toggle switch. If your admin theme names this
 * differently, these rules will simply not match -- inspect the control
 * and adjust the selectors below accordingly.
 */

input.form-boolean--type-checkbox,
input.form-boolean-toggle {
  appearance: none;
  -webkit-appearance: none;
  background-color: #ffffff !important;
  border: 2px solid #343537 !important;
  box-shadow: none !important;
  position: relative;
}

input.form-boolean--type-checkbox::after,
input.form-boolean-toggle::after {
  background-color: #343537 !important;
}

input.form-boolean--type-checkbox:checked,
input.form-boolean-toggle:checked {
  background-color: #294779 !important;
  border-color: #294779 !important;
}

input.form-boolean--type-checkbox:checked::after,
input.form-boolean-toggle:checked::after {
  background-color: #ffffff !important;
}

input.form-boolean--type-checkbox:focus-visible,
input.form-boolean-toggle:focus-visible {
  outline: 3px solid #ffbf47 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #202124 !important;
}