/* Shared Bootstrap-compatible switch. The checkbox remains the native form control.
   The decorative indicator is only for buttons with menuitemcheckbox semantics.
   One geometry and palette for every site module, regardless of its container. */
:is(input[type="checkbox"][role="switch"], .ui-switch-indicator) {
  --tg-switch-width: 44px;
  --tg-switch-height: 24px;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ced4da'/%3e%3c/svg%3e");
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: inline-block;
  position: static;
  float: none;
  flex: 0 0 auto;
  width: var(--tg-switch-width);
  min-width: var(--tg-switch-width);
  max-width: var(--tg-switch-width);
  height: var(--tg-switch-height);
  min-height: var(--tg-switch-height);
  margin: 0;
  padding: 0;
  vertical-align: middle;
  border: 1px solid var(--st-edge, #8d796c);
  border-radius: 2em;
  background-color: var(--st-panel, #463a31);
  background-image: var(--bs-form-switch-bg);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out;
}
:is(input[type="checkbox"][role="switch"]:checked, [aria-checked="true"] .ui-switch-indicator) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-color: var(--st-accent, #ff7508);
  border-color: var(--st-accent, #ff7508);
  background-image: var(--bs-form-switch-bg);
  background-position: right center;
}
input[type="checkbox"][role="switch"]:focus-visible {
  outline: 2px solid var(--st-accent, #ff7508);
  outline-offset: 3px;
  box-shadow: none;
}
input[type="checkbox"][role="switch"]:disabled {
  opacity: .5;
  cursor: not-allowed;
}
:is(input[type="checkbox"][role="switch"], .ui-switch-indicator).ui-switch-sm {
  --tg-switch-width: 36px;
  --tg-switch-height: 20px;
}
:is(input[type="checkbox"][role="switch"], .ui-switch-indicator).ui-switch-md {
  --tg-switch-width: 44px;
  --tg-switch-height: 24px;
}
@media (prefers-reduced-motion: reduce) {
  :is(input[type="checkbox"][role="switch"], .ui-switch-indicator) { transition: none; }
}
@media (forced-colors: active) {
  input[type="checkbox"][role="switch"] {
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    height: 24px;
    min-height: 24px;
    background: none;
  }
}