/* =============================================================================
   Ela Design System — Switch (toggle)
   -----------------------------------------------------------------------------
   Accessible on/off toggle built around a real checkbox so it works with the
   keyboard, forms, and labels for free. The checkbox is visually hidden; the
   track + thumb are driven off its `:checked` / `:focus-visible` state.

     <label class="switch">
       <input class="switch__input" type="checkbox" checked>
       <span class="switch__track"><span class="switch__thumb"></span></span>
     </label>

   Off = neutral track; On = brand-green track with the thumb slid right.
   ============================================================================= */

.switch {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  cursor: pointer;

  /* knobs — override per instance if needed */
  --switch-w: 46px;
  --switch-h: 28px;
  --switch-pad: 3px;
  --switch-thumb: calc(var(--switch-h) - var(--switch-pad) * 2);
}

/* Visually-hidden native checkbox (kept focusable + hit-testable). */
.switch__input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.switch__track {
  position: relative;
  display: inline-block;
  width: var(--switch-w);
  height: var(--switch-h);
  border-radius: var(--br-full);
  background: var(--bg-tertiary);
  transition: background 160ms ease;
}

.switch__thumb {
  position: absolute;
  top: var(--switch-pad);
  left: var(--switch-pad);
  width: var(--switch-thumb);
  height: var(--switch-thumb);
  border-radius: var(--br-full);
  background: var(--bg-active);
  box-shadow: var(--shadow-2);
  transition: transform 160ms var(--ease-drawer);
}

/* ----- On ----- */
.switch__input:checked + .switch__track {
  background: var(--bg-brand-primary);
}
.switch__input:checked + .switch__track .switch__thumb {
  transform: translateX(calc(var(--switch-w) - var(--switch-thumb) - var(--switch-pad) * 2));
}

/* ----- Focus ----- */
.switch__input:focus-visible + .switch__track {
  outline: 2px solid var(--fg-brand);
  outline-offset: 2px;
}

/* ----- Disabled ----- */
.switch__input:disabled + .switch__track { opacity: 0.5; }
.switch:has(.switch__input:disabled) { cursor: not-allowed; }

/* Reduced motion drops the thumb's travel; the track's color fade stays. */
@media (prefers-reduced-motion: reduce) {
  .switch__thumb { transition: none; }
}