/**
 * Sena Design System v1.0
 * Toggle switch
 *
 * Requires: colors.css + theme.css
 *
 * Usage:
 *   <label class="switch">
 *     <input type="checkbox" class="switch-input" />
 *     <span class="switch-track"></span>
 *   </label>
 *
 * The visual twin of .am-switch in account-modal.css, promoted to a shared
 * component. New code uses this one.
 */

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.switch-track {
  position: relative;
  width: 32px;
  height: 18px;
  background: var(--stroke-secondary);
  border-radius: 10px;
  transition: background-color var(--duration-base) var(--ease-out);
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--bg-primary);
  border-radius: 50%;
  box-shadow: var(--shadow-knob);
  transition: transform var(--duration-base) var(--ease-out);
}
.switch-input:checked + .switch-track { background: var(--fg-accent); }
.switch-input:checked + .switch-track::after { transform: translateX(14px); }
.switch-input:focus-visible + .switch-track {
  outline: 2px solid var(--stroke-accent);
  outline-offset: 2px;
}
.switch-input:disabled + .switch-track { opacity: 0.4; }
.switch:has(.switch-input:disabled) { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .switch-track,
  .switch-track::after { transition: none; }
}