/*
 * .switch — a toggle: a native checkbox styled as a sliding switch (appearance
 * none + a ::after thumb). Structure: label.switch > input.switch__input + text
 */
@layer components {
  .switch {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u-pad) / 2);
    cursor: pointer;
    font-size: var(--font-size-1);
  }
  .switch__input {
    appearance: none;
    position: relative;
    flex-shrink: 0;
    inline-size: 2.25rem;
    block-size: 1.25rem;
    background: var(--line);
    border-radius: var(--radius-round);
    cursor: pointer;
    transition: background-color 0.15s var(--ease-3);
  }
  .switch__input::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.125rem;
    translate: 0 -50%;
    inline-size: 1rem;
    block-size: 1rem;
    background: var(--canvas);
    border-radius: var(--radius-round);
    transition: translate 0.15s var(--ease-3);
  }
  .switch__input:checked { background: var(--accent); }
  .switch__input:checked::after { translate: 1rem -50%; }
  .switch__input:focus-visible { outline: var(--border-size-2) solid var(--accent); outline-offset: 2px; }
  .switch:has(.switch__input:disabled) { opacity: 0.5; cursor: not-allowed; }

  @media (prefers-reduced-motion: reduce) {
    .switch__input, .switch__input::after { transition: none; }
  }
}