@layer components {
  /* A setting you flip: the checkbox drawn as a track and knob, large enough
     to read as furniture (user, 2026-08-06 — BC's settings toggles). Ink when
     on: the knob's position is state, and state is not accent. The knob moves
     at --speed-quick, recorded with the toggle's Deviations entry. */
  .switch {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    cursor: pointer;
  }

  .switch__input {
    appearance: none;
    inline-size: 2.6rem;
    block-size: 1.5rem;
    flex-shrink: 0;
    background-color: var(--color-line);
    border-radius: 999px;
    position: relative;
    transition: background-color var(--speed-quick) var(--ease-out);

    &::before {
      content: "";
      position: absolute;
      inset-block-start: 3px;
      inset-inline-start: 3px;
      inline-size: calc(1.5rem - 6px);
      block-size: calc(1.5rem - 6px);
      background-color: var(--color-canvas);
      border-radius: 50%;
      transition: translate var(--speed-quick) var(--ease-out);
    }

    &:checked {
      background-color: var(--color-ink);

      &::before {
        translate: 1.1rem 0;
      }
    }
  }
}