/* ===========================
 * Toggle / Switch Component Styles
 * ===========================
 * A native <input type="checkbox" role="switch"> styled as a sliding switch.
 * CSS-only — state derives from :checked / :hover / :focus-visible / :disabled.
 * Sizes: md (track 44×24, default), sm (track 36×20)
 * States: default, hover, focus, disabled
 * Elements: toggle-group (wrapper) · toggle-switch (positions input over track)
 *           toggle-track · toggle-thumb · toggle-text · toggle-label · toggle-supporting-text
 * Source: Figma node 2713:17491. Zero new tokens.
 * Dark mode handled by CSS custom properties via data-theme attribute.
 * =========================== */


/* ─── 1. Group (wrapper: switch + text) ─── */

.toggle-group {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md, 8px);
  cursor: pointer;
}

.toggle-group.toggle-disabled {
  cursor: not-allowed;
}


/* ─── 2. Switch (positions the hidden input over the visual track) ─── */

.toggle-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}


/* ─── 3. Hidden Native Input ─── */

.toggle-switch input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.toggle-disabled .toggle-switch input[type="checkbox"] {
  cursor: not-allowed;
  pointer-events: none;
}


/* ─── 4. Track (md defaults) ─── */

.toggle-track {
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  padding: 2px;
  box-sizing: border-box;
  background-color: var(--bg-quaternary);
  border-radius: var(--radius-full, 9999px);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}


/* ─── 5. Thumb (md defaults) ─── */

.toggle-thumb {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: var(--fg-white, #fff);
  border-radius: var(--radius-full, 9999px);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─── 6. On (checked) — thumb slides right, track turns brand ─── */

.toggle-switch input:checked ~ .toggle-track {
  background-color: var(--bg-brand-solid);
}

.toggle-switch input:checked ~ .toggle-track .toggle-thumb {
  transform: translateX(20px);
}


/* ─── 7. Hover (only the ON track darkens; OFF is unchanged per Figma) ─── */

.toggle-group:hover:not(.toggle-disabled) .toggle-switch input:checked ~ .toggle-track {
  background-color: var(--bg-brand-solid-hover);
}


/* ─── 8. Focus (1px surface gap + 3px brand ring; DS focus convention) ─── */

.toggle-switch input:focus-visible ~ .toggle-track,
.toggle-group.toggle-focused .toggle-track {
  box-shadow: 0 0 0 1px var(--bg-primary), 0 0 0 3px var(--brand-500);
}


/* ─── 9. Disabled (flat track; grey, shadowless thumb) ─── */

.toggle-disabled .toggle-track,
.toggle-disabled .toggle-switch input:checked ~ .toggle-track {
  background-color: var(--bg-disabled);
}

.toggle-disabled .toggle-thumb {
  background-color: var(--fg-senary);
  box-shadow: none;
}


/* ─── 10. Size: sm (track 36×20, thumb 16, travel 16) ─── */

.toggle-sm .toggle-track {
  width: 36px;
  height: 20px;
}

.toggle-sm .toggle-thumb {
  width: 16px;
  height: 16px;
}

.toggle-sm .toggle-switch input:checked ~ .toggle-track .toggle-thumb {
  transform: translateX(16px);
}


/* ─── 11. Label & Supporting Text (mirrors checkbox-text) ─── */

.toggle-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.toggle-label {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--text-primary);
}

.toggle-supporting-text {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--text-quaternary-500, #85888e);
}

.toggle-sm .toggle-label {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.toggle-sm .toggle-supporting-text {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.toggle-disabled .toggle-label,
.toggle-disabled .toggle-supporting-text {
  color: var(--text-disabled);
}


/* ─── 12. Demo State Class (forces focus ring in the docs States grid) ─── */

.toggle-group.toggle-focused {
  pointer-events: none;
}


/* ─── 13. Reduced motion ─── */

@media (prefers-reduced-motion: reduce) {
  .toggle-track,
  .toggle-thumb {
    transition: none;
  }
}