@layer components {
  .singlestage-input[type="checkbox"][role="switch"] {
    @apply appearance-none
    before:bg-background
    before:block
    before:content-['']
    before:pointer-events-none
    before:ring-0
    before:rounded-full
    before:size-4
    before:transition-all
    bg-input
    border
    border-transparent
    checked:before:ms-3.5
    checked:bg-primary
    disabled:cursor-not-allowed
    disabled:opacity-50
    focus-visible:border-ring
    focus-visible:ring-[3px]
    focus-visible:ring-ring/50
    h-[1.15rem]
    inline-flex
    items-center
    outline-none
    rounded-full
    shadow-xs
    shrink-0
    transition-all
    w-8;
  }
}
