input[type="checkbox"].switch {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--gray-300);
  border: none;
  border-radius: var(--radius-full);
  block-size: var(--spacing-6);
  inline-size: 1.875rem;
  padding: var(--spacing-1);
  position: relative;
  transition: background-color 150ms;
  width: 1.875rem;
  height: var(--spacing-6);

  &::after {
    content: none;
    display: none;
  }

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

  &:checked::before {
    margin-inline-start: 0.875rem;
  }

  &::before {
    aspect-ratio: 1 / 1;
    background-color: var(--gray-25);
    block-size: 100%;
    border-radius: var(--radius-full);
    content: "";
    display: block;
    transition: margin 150ms;
  }

  &:focus-visible {
    outline: 2px solid var(--primary-300);
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}