/* =============================================================
   Socle · Interrupteur (.sc-switch)
   Bascule immédiate d'un réglage. Piste et pouce sont dessinés
   en CSS, sans image ni script.
   Consomme uniquement des tokens sémantiques.
   Taille : --s (défaut : m)
   Enveloppe : .sc-choice et .sc-choice-group (checkbox.css)
   ============================================================= */

.sc-switch {
  /* Tokens de composant : taille et états ne font que réassigner
     ceci. Les dimensions de la piste sont structurelles. */
  --_switch-width: var(--space-40);
  --_switch-height: var(--space-24);
  --_switch-thumb-size: var(--space-20);
  --_switch-thumb-inset: var(--space-2);
  --_switch-travel: var(--space-16);
  --_switch-track: var(--color-control-track);
  --_switch-thumb: var(--color-control-knob);

  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: var(--_switch-width);
  height: var(--_switch-height);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--_switch-track);
  cursor: pointer;
  transition: background-color var(--motion-fast);
}

/* Pouce : un cercle plein qui glisse d'un bout à l'autre. */
.sc-switch::before {
  content: "";
  position: absolute;
  inset-block-start: var(--_switch-thumb-inset);
  inset-inline-start: var(--_switch-thumb-inset);
  width: var(--_switch-thumb-size);
  height: var(--_switch-thumb-size);
  border-radius: var(--radius-pill);
  background: var(--_switch-thumb);
  transition:
    transform var(--motion-fast),
    background-color var(--motion-fast);
}

.sc-switch:checked::before {
  transform: translateX(var(--_switch-travel));
}

/* La piste dépasse d'un cheveu la hauteur d'une ligne de libellé :
   micro-décalage pour recentrer le texte sur la bascule. */
.sc-choice:has(> .sc-switch:not(.sc-switch--s)) .sc-choice__text {
  padding-block-start: var(--space-2);
}

/* ---- États ---- */

.sc-switch:checked {
  --_switch-track: var(--color-accent);
}

.sc-switch:hover:not(:disabled),
.sc-switch[data-state="hover"] {
  --_switch-track: var(--color-border-hover);
}

.sc-switch:checked:is(:hover:not(:disabled), [data-state="hover"]) {
  --_switch-track: var(--color-accent-hover);
}

.sc-switch:active:not(:disabled),
.sc-switch[data-state="active"] {
  --_switch-track: var(--color-border-active);
  --_switch-thumb: var(--color-control-knob-active);
}

.sc-switch:checked:is(:active:not(:disabled), [data-state="active"]) {
  --_switch-track: var(--color-accent-active);
}

/* Simulation du focus clavier pour la doc (le vrai focus passe
   par :focus-visible dans base.css). */
.sc-switch[data-state="focus"] {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.sc-switch:disabled,
.sc-switch[data-disabled] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Dans une enveloppe .sc-choice, l'opacité est portée par
   l'enveloppe : on ne la cumule pas sur le contrôle. */
.sc-choice .sc-switch:disabled,
.sc-choice .sc-switch[data-disabled] {
  opacity: 1;
}

/* ---- Taille compacte ---- */

.sc-switch--s {
  --_switch-width: var(--space-32);
  --_switch-height: var(--space-20);
  --_switch-thumb-size: var(--space-16);
  --_switch-travel: var(--space-12);
}