.switch {
  @apply inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent;
  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
  @apply data-[state=unchecked]:bg-input data-[state=checked]:bg-blue-600;
  @apply disabled:cursor-not-allowed disabled:opacity-50;

  &-toggle {
    @apply bg-background pointer-events-none block h-4 w-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0;
  }
}