.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);
  }
}

.switch--green {
  background-color: #fa6b6b;

  &::before {
    background-color: #ffffff;
  }

  &:checked {
    background-color: #10b981;
  }

  &:checked::before {
    background-color: #ffffff;
  }

  &:focus-visible {
    outline: var(--border-2) solid #059669;
  }
}