@layer components {

/* ── ds-switch ────────────────────────────────────────────────────────────
 * MUI-style toggle Switch. CSS-only (a checkbox drives every state), so it
 * works anywhere a checkbox does and stays accessible.
 *
 * Anatomy:           1. Track  2. Handle (thumb)
 * States (on/off):   1. enabled  2. hover  3. pressed/focus (ripple)  4. disabled
 *
 * Markup:
 *   <label class="ds-switch">
 *     <input type="checkbox" class="ds-switch__input" />
 *     <span class="ds-switch__track"></span>
 *     <span class="ds-switch__thumb"></span>
 *   </label>
 *
 * Geometry (matches MUI medium): root 58×38, track 34×14, thumb 20×20 with a
 * slight end overhang; thumb travels 20px. The hover/press ripple is a halo
 * behind the thumb.
 */
.ds-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 58px;
  height: 38px;
  vertical-align: middle;
}

/* Transparent, full-size checkbox sits on top to capture clicks + a11y. */
.ds-switch__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

/* 1. Track */
.ds-switch__track {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 14px;
  border-radius: 7px;
  transform: translate(-50%, -50%);
  background: var(--c-neutral-900, #212121);
  opacity: 0.38;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* 2. Handle (thumb) */
.ds-switch__thumb {
  position: absolute;
  top: 50%;
  left: 9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--color-bg-surface, #fff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.14);
  transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background 150ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* 3. Ripple halo — sits behind the thumb, grows on hover / press / focus. */
.ds-switch__thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.55);
  background: currentColor;
  opacity: 0;
  z-index: -1;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── OFF (unchecked) — neutral grey ─────────────────────────────────────── */
.ds-switch__thumb { color: var(--c-neutral-900, #212121); }   /* ripple tint when off */

.ds-switch__input:hover:not(:disabled) ~ .ds-switch__thumb::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.06;
}
.ds-switch__input:focus-visible ~ .ds-switch__thumb::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.12;
}
.ds-switch__input:active:not(:disabled) ~ .ds-switch__thumb::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.16;
}

/* ── ON (checked) — brand blue ──────────────────────────────────────────── */
.ds-switch__input:checked ~ .ds-switch__thumb {
  left: 29px;
  background: var(--c-brand-500, #3f5bff);
  color: var(--c-brand-500, #3f5bff);                          /* ripple tint when on */
}
.ds-switch__input:checked ~ .ds-switch__track {
  background: var(--c-brand-500, #3f5bff);
  opacity: 0.5;
}
.ds-switch__input:checked:hover:not(:disabled) ~ .ds-switch__thumb::after { opacity: 0.10; }
.ds-switch__input:checked:active:not(:disabled) ~ .ds-switch__thumb::after { opacity: 0.22; }

/* ── 4. Disabled ────────────────────────────────────────────────────────── */
.ds-switch__input:disabled { cursor: default; }
.ds-switch__input:disabled ~ .ds-switch__track { opacity: 0.20; }
.ds-switch__input:disabled ~ .ds-switch__thumb {
  background: var(--c-neutral-100, #f5f5f5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.ds-switch__input:checked:disabled ~ .ds-switch__thumb {
  background: var(--c-brand-200, #a6b3ff);
}
.ds-switch__input:checked:disabled ~ .ds-switch__track {
  background: var(--c-brand-500, #3f5bff);
  opacity: 0.24;
}

} /* end @layer components */