/* ============================================
   RenDS — Switch / Toggle Component
   ============================================
   Custom-styled toggle switch built on native
   <input type="checkbox" role="switch">.

   Preserves native semantics and accessibility.
   Custom visuals via CSS only.

   Usage:
     <label class="ren-switch">
       <input type="checkbox" role="switch">
       <span class="ren-switch-track"></span>
       <span>Dark mode</span>
     </label>
   ============================================ */

.ren-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--body-size);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  user-select: none;
  min-height: var(--touch-min);
}

/* Hide native input */
.ren-switch > input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* Track */
.ren-switch-track {
  position: relative;
  width: var(--ren-switch-width);    /* 51px — Apple HIG */
  height: var(--ren-switch-height);   /* 31px */
  flex-shrink: 0;
  background-color: var(--ren-switch-bg);
  border-radius: var(--radius-full);
  transition:
    background-color var(--ren-switch-duration) var(--ren-switch-easing);
}

/* Thumb */
.ren-switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: var(--ren-switch-thumb-size);   /* 27px */
  height: var(--ren-switch-thumb-size);
  background-color: var(--ren-switch-thumb-color);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--ren-switch-duration) var(--ren-switch-easing),
    box-shadow var(--ren-switch-duration) var(--ren-switch-easing);
}

/* ─── States ─── */

/* Checked (on) */
.ren-switch > input:checked + .ren-switch-track {
  background-color: var(--ren-switch-checked-bg);
}

.ren-switch > input:checked + .ren-switch-track::after {
  transform: translateX(calc(var(--ren-switch-width) - var(--ren-switch-height)));
}

/* Hover */
.ren-switch:hover > .ren-switch-track {
  background-color: var(--color-fill-hover);
}

.ren-switch:hover > input:checked + .ren-switch-track {
  background-color: var(--color-success-strong);
}

/* Focus */
.ren-switch > input:focus-visible + .ren-switch-track {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: var(--ring-offset-width);
}

/* Active */
.ren-switch:active > .ren-switch-track::after {
  width: calc(var(--ren-switch-thumb-size) + 6px);
}

.ren-switch:active > input:checked + .ren-switch-track::after {
  transform: translateX(calc(var(--ren-switch-width) - var(--ren-switch-height) - 6px));
}

/* Disabled */
.ren-switch:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}