.switch {
  @apply -flex -gap-1.5 -relative -min-h-[20px] -pl-10;
}
.switch > input {
  @apply -opacity-0 -absolute -inset-0;
}
.switch > label::before,
.switch > label::after {
  @apply -content-[''] -absolute -w-8 -h-4 -rounded-full -bg-surface -left-0 -top-0.5 -border-border-strong -border -transition-all -duration-300;
}
.switch > label::before {
  @apply -cursor-pointer -shadow-inner;
}
.switch > label:hover::before {
  @apply -border-border;
}
.switch > label::after {
  @apply -w-3 -h-3 -bg-canvas -top-1 -left-0.5 -border-canvas -shadow;
}
.switch> input:checked + label::before {
    @apply -bg-[--checkbox-color] -border-inverse/20;
  }
.switch> input:checked + label::after {
  @apply -text-[--checkbox-color] -left-[18px];
}

.switch > input:focus + label::before,
.switch.focus > label::before {
  @apply -outline -outline-focus -outline-2 -border-[--checkbox-color];
}

.switch > input:disabled + label::before,
.switch.disabled > label::before {
  @apply -grayscale -opacity-70 -cursor-not-allowed -pointer-events-none;
}
