@layer components {
  .switch {
    appearance: none;
    background-color: var(--color-border);
    border-color: transparent;
    border-radius: var(--rounded-full);
    border-width: var(--border-2);
    block-size: var(--size-5);
    inline-size: var(--size-9);
    transition: background-color var(--time-150);

    &:checked {
      background-color: var(--color-primary);
    }

    &:checked::before {
      margin-inline-start: var(--size-4);
    }

    &::before {
      aspect-ratio: var(--aspect-square);
      background-color: var(--color-text-reversed);
      block-size: var(--size-full);
      border-radius: var(--rounded-full);
      content: "";
      display: block;
      transition: margin var(--time-150);
    }

    &:focus-visible {
      outline: var(--border-2) solid var(--color-selected-dark);
    }

    &:disabled {
      cursor: not-allowed;
      opacity: var(--opacity-50);
    }
  }
}