/* ============================================================
   ELEGANT MINIMALIST UI KIT — Toggle / Switch Component
   toggle.css

   ANATOMY — SWITCH
   ─────────────────────────────────────────────────────────────
   Structure:
     <label class="switch switch-md">
       <input type="checkbox" class="switch-native" />
       <span class="switch-track">
         <span class="switch-thumb">
           <!-- optional icon inside thumb -->
         </span>
         <!-- optional ON/OFF labels inside track -->
       </span>
       <span class="switch-label">Label text</span>
     </label>

   Class layers:
     1. .switch              → Wrapper label, flex layout
     2. .switch-{size}       → Track & thumb sizes (sm/md/lg)
     3. .switch-{variant}    → Style (card/icon/labels)
     4. .switch-label-{pos}  → Label position (right/left/top)
     5. .switch-native       → Hidden native checkbox (accessible)
     6. .switch-track        → Pill-shaped background
     7. .switch-thumb        → Circle that slides via translateX
   ─────────────────────────────────────────────────────────────

   ANATOMY — SWITCH GROUP
   ─────────────────────────────────────────────────────────────
     <div class="switch-group">
       <span class="switch-group-label">Settings</span>
       <div class="switch-group-item">
         <label class="switch switch-md">...</label>
       </div>
       <div class="switch-separator"></div>
       <div class="switch-group-item">
         <label class="switch switch-md">...</label>
       </div>
     </div>
   ─────────────────────────────────────────────────────────────
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   SWITCH — Base wrapper (label)
   ═══════════════════════════════════════════════════════════ */

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--control-gap);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--input-text-color);
  line-height: var(--leading-tight);
  position: relative;
}

/* Hide native input — accessible but invisible */
.switch-native {
  position: absolute;
  width: var(--space-0);
  height: var(--space-0);
  opacity: 0;
  pointer-events: none;
}

/* ── Track (pill shape) ─────────────────────────────────── */
.switch-track {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: var(--switch-md-track-w);
  height: var(--switch-md-track-h);
  border-radius: var(--radius-pill);
  background-color: var(--switch-track-off);
  transition: background-color var(--duration-normal) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-out);
  position: relative;
  padding: var(--space-0-5);
  box-sizing: border-box;
  overflow: hidden;
}

/* ── Thumb (circle that slides) ─────────────────────────── */
.switch-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--switch-md-thumb);
  height: var(--switch-md-thumb);
  border-radius: var(--radius-pill);
  background-color: var(--switch-thumb);
  box-shadow: var(--switch-thumb-shadow);
  transform: translateX(0);
  transition: transform var(--duration-normal) var(--ease-out);
  position: relative;
  flex-shrink: 0;
}

/* Checked: slide thumb to right, change track color */
.switch-native:checked ~ .switch-track {
  background-color: var(--switch-track-on);
}

.switch-native:checked ~ .switch-track .switch-thumb {
  transform: translateX(var(--switch-md-translate));
}

/* ── Sizes ──────────────────────────────────────────────── */

/* Small */
.switch-sm .switch-track {
  width: var(--switch-sm-track-w);
  height: var(--switch-sm-track-h);
}

.switch-sm .switch-thumb {
  width: var(--switch-sm-thumb);
  height: var(--switch-sm-thumb);
}

.switch-sm .switch-native:checked ~ .switch-track .switch-thumb {
  transform: translateX(var(--switch-sm-translate));
}

/* Medium (default) — sizes already set on base */

/* Large */
.switch-lg .switch-track {
  width: var(--switch-lg-track-w);
  height: var(--switch-lg-track-h);
}

.switch-lg .switch-thumb {
  width: var(--switch-lg-thumb);
  height: var(--switch-lg-thumb);
}

.switch-lg .switch-native:checked ~ .switch-track .switch-thumb {
  transform: translateX(var(--switch-lg-translate));
}

/* ═══════════════════════════════════════════════════════════
   SWITCH — Icon inside thumb
   ═══════════════════════════════════════════════════════════ */

.switch-thumb-icon {
  width: 55%;
  height: 55%;
  stroke: var(--color-accent-500);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--duration-fast) var(--ease-in-out),
              transform var(--duration-fast) var(--ease-out);
}

/* Show icon when on */
.switch-native:checked ~ .switch-track .switch-thumb-icon.is-on {
  opacity: 1;
  transform: scale(1);
}

/* Show off icon when off */
.switch-track .switch-thumb-icon.is-off {
  opacity: 0.4;
  stroke: var(--color-neutral-400);
  transform: scale(1);
}

.switch-native:checked ~ .switch-track .switch-thumb-icon.is-off {
  opacity: 0;
  transform: scale(0.7);
}

/* ═══════════════════════════════════════════════════════════
   SWITCH — ON/OFF labels inside track
   ═══════════════════════════════════════════════════════════ */

.switch-track .switch-label-on,
.switch-track .switch-label-off {
  font-family: var(--font-sans);
  font-size: var(--switch-label-font-size);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.switch-track .switch-label-off {
  left: var(--space-1-5);
  color: var(--color-neutral-500);
}

.switch-track .switch-label-on {
  right: var(--space-1-5);
  color: var(--color-neutral-50);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-in-out);
}

.switch-native:checked ~ .switch-track .switch-label-on {
  opacity: 1;
}

/* Hide labels when thumb covers them */
.switch-track .switch-label-off {
  transition: opacity var(--duration-fast) var(--ease-in-out);
}

.switch-native:checked ~ .switch-track .switch-label-off {
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════
   SWITCH — Variant: Card
   Entire row clickable, like a settings item.
   ═══════════════════════════════════════════════════════════ */

.switch-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--select-bg);
  transition: border-color var(--duration-normal) var(--ease-in-out),
              background-color var(--duration-fast) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-out);
  width: 100%;
  cursor: pointer;
}

.switch-card:hover {
  border-color: var(--border-color-strong);
  background-color: var(--color-neutral-50);
}

.switch-card .switch-content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
}

.switch-card-icon {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
  color: var(--color-neutral-500);
}

.switch-card-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.switch-card-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--input-text-color);
}

.switch-card-desc {
  font-size: var(--text-xs);
  color: var(--input-helper-color);
  line-height: var(--leading-tight);
}

.switch-card .switch-track {
  flex-shrink: 0;
}

.switch-card .switch-native:checked ~ .switch-track {
  background-color: var(--switch-track-on);
}

/* ═══════════════════════════════════════════════════════════
   SWITCH — Label positions
   ═══════════════════════════════════════════════════════════ */

/* Label left (switch on right) */
.switch-label-left {
  flex-direction: row-reverse;
}

/* Label top (switch below) */
.switch-label-top {
  flex-direction: column;
  align-items: flex-start;
}

.switch-label-top .switch-track {
  margin-top: var(--space-1-5);
}

/* ═══════════════════════════════════════════════════════════
   SWITCH — States
   ═══════════════════════════════════════════════════════════ */

/* Focus visible */
.switch-native:focus-visible ~ .switch-track {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Disabled */
.switch.is-disabled {
  opacity: var(--switch-disabled-opacity);
  cursor: var(--input-disabled-cursor);
  pointer-events: none;
}

.switch-card.is-disabled {
  opacity: var(--switch-disabled-opacity);
  cursor: var(--input-disabled-cursor);
  pointer-events: none;
}

/* Loading state — thumb spins */
.switch.is-loading .switch-thumb {
  animation: switch-spin var(--anim-spin-duration) linear infinite;
  background-image: none;
  position: relative;
}

.switch.is-loading .switch-thumb::before {
  content: '';
  position: absolute;
  inset: var(--switch-spinner-inset);
  border-radius: var(--radius-pill);
  border: var(--border-width-2) solid var(--color-neutral-300);
  border-top-color: var(--color-accent-500);
  animation: switch-spinner-ring var(--anim-spinner-fast) linear infinite;
}

.switch.is-loading .switch-track {
  background-color: var(--color-neutral-200);
  cursor: wait;
}

@keyframes switch-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes switch-spinner-ring {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Override translate during loading so thumb stays centered */
.switch.is-loading .switch-native:checked ~ .switch-track .switch-thumb {
  animation: switch-spin var(--anim-spin-duration) linear infinite;
  transform: translateX(var(--switch-md-translate));
}

.switch-sm.is-loading .switch-native:checked ~ .switch-track .switch-thumb {
  transform: translateX(var(--switch-sm-translate));
}

.switch-lg.is-loading .switch-native:checked ~ .switch-track .switch-thumb {
  transform: translateX(var(--switch-lg-translate));
}

/* ═══════════════════════════════════════════════════════════
   SWITCH GROUP — Container with separators
   ═══════════════════════════════════════════════════════════ */

.switch-group {
  display: flex;
  flex-direction: column;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--select-bg);
  overflow: hidden;
}

.switch-group-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--input-label-color);
  padding: var(--space-4) var(--space-4) var(--space-2);
  display: block;
}

.switch-group-helper {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--input-helper-color);
  padding: var(--space-2) var(--space-4) var(--space-4);
  display: block;
}

.switch-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  transition: background-color var(--duration-fast) var(--ease-in-out);
}

.switch-group-item:hover {
  background-color: var(--color-neutral-50);
}

/* Separator between items */
.switch-separator {
  height: var(--border-width);
  background-color: var(--color-neutral-100);
  margin: 0 var(--space-4);
}

/* ═══════════════════════════════════════════════════════════
   SWITCH GROUP — Error state
   ═══════════════════════════════════════════════════════════ */

.switch-group-error .switch-group {
  border-color: var(--color-error);
}

.switch-group-error-msg {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-error);
  line-height: var(--leading-tight);
}

.switch-group-error-msg svg {
  width: var(--space-3);
  height: var(--space-3);
  flex-shrink: 0;
  color: var(--color-error);
}