/* ==========================================================
   IROZON DESIGN SYSTEM — Switch (canonical, v1)
   Public API:
     <label class="iz-switch">
       <input class="iz-switch__input" type="checkbox" role="switch" />
       <span class="iz-switch__track" aria-hidden="true">
         <span class="iz-switch__thumb"></span>
       </span>
       <span class="iz-switch__label">Enable notifications</span>
     </label>
   A binary settings control (Notifications, Auto-save, Dark mode) —
   not a general toggle-button/segmented-control replacement, and not
   a mandatory replacement for an icon-only theme toggle (see the
   Switch doc page for that distinction). Native checkbox is the
   source of truth: no JS required for basic switching, state comes
   from :checked/:disabled, never a JS-managed .is-on class. The
   <label> wrapper makes the full row (track + text) a click target,
   not just the 40x24px track. __label is optional — a consumer
   supplying an accessible name another way (aria-label on the input)
   may omit it and ship track-only.
   ========================================================== */

.iz-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.iz-switch:has(.iz-switch__input:disabled) {
  cursor: not-allowed;
}

/* Visually hidden, not display:none — stays in the accessibility tree
   and keyboard-focusable; sized to match the track so its focus/click
   target lines up exactly with what's drawn. */
.iz-switch__input {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 40px;
  block-size: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.iz-switch__input:disabled {
  cursor: not-allowed;
}

.iz-switch__track {
  position: relative;
  flex: none;
  inline-size: 40px;
  block-size: 24px;
  /* Rounded rectangle, not a pill — matches Irozon's broader
     architectural corner language (--r-xs, the same radius compact
     product chrome already uses) rather than a fully bubble/pill
     switch. */
  border-radius: var(--r-xs);
  background: var(--color-border);
  /* An inset ring, not a real `border` — a real border shrinks this
     element's padding box (the containing block the thumb's `inset-*`
     resolves against), which previously threw both the vertical AND
     horizontal insets off by the border width. A box-shadow paints
     the same 1px ring without touching the box model, so the thumb's
     insets below resolve against the full, undiminished 40x24 box
     exactly as their numbers assume. */
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}
.iz-switch__thumb {
  position: absolute;
  /* Block axis: centered via inset+auto-margin, not a fixed
     `inset-block-start` offset — robust to the track's actual
     resolved height regardless of box-sizing, rather than a magic
     offset that only happens to work under one specific box model. */
  inset-block: 0;
  margin-block: auto;
  inset-inline-start: 4px;
  inline-size: 16px;
  block-size: 16px;
  /* Rounded square, not a circle — a smaller radius than the track's
     own, so the thumb reads as its own distinct rounded-rectangle
     shape nested inside the track rather than a ball inside a pill.
     No canonical radius token lands on 5px (--r-xs is 8, one size up
     from this control's own scale), so this is a deliberate
     component-local value rather than a token. */
  border-radius: 5px;
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-sm);
  transform: translateX(0);
  transition:
    transform var(--motion-duration-fast) var(--motion-ease-standard),
    background-color var(--motion-duration-fast) var(--motion-ease-standard);
}
[dir="rtl"] .iz-switch__thumb {
  inset-inline-start: unset;
  inset-inline-end: 4px;
}

/* ---------- On ----------
   Track -> Green, thumb -> Ink. A purposeful, functional use of
   Green (a real state, not decoration) — never Lime, no gradient, no
   glow. */
.iz-switch__input:checked ~ .iz-switch__track {
  background: var(--irozon-green);
  box-shadow: inset 0 0 0 1px var(--irozon-green);
}
.iz-switch__input:checked ~ .iz-switch__track .iz-switch__thumb {
  background: var(--irozon-ink);
  transform: translateX(16px);
}
[dir="rtl"] .iz-switch__input:checked ~ .iz-switch__track .iz-switch__thumb {
  transform: translateX(-16px);
}

.iz-switch__label {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
}

/* ---------- Focus ----------
   The native input is visually hidden but still the real focus
   target; :focus-visible on it draws the ring on the visible track via
   the sibling combinator. Offset (not inset) so the ring stays
   perceptible even when the track itself is already Green (checked +
   focused at once) — a gap of canvas-colored space always separates
   ring from fill, regardless of matching hue. */
.iz-switch__input:focus-visible ~ .iz-switch__track {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* ---------- Disabled ----------
   Native disabled remains the actual disabled state; this only
   reduces emphasis without dropping legibility. */
.iz-switch__input:disabled ~ .iz-switch__track {
  opacity: 0.5;
}
.iz-switch__input:disabled ~ .iz-switch__label {
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .iz-switch__track,
  .iz-switch__thumb {
    transition: none;
  }
}