[type="checkbox"][role="switch"] {
    @apply appearance-none align-middle cursor-pointer inline-flex items-center
    justify-center p-[var(--spacing-local-small)] relative select-none leading-[var(--size-text-line-height)]
    text-[rgb(var(--palette-background-bold))] whitespace-nowrap;

    background-color: rgba(var(--palette-background-bold), theme("opacity.20"));
    border-radius: var(--radius-pill);

    font-size: var(--size-text-size);

    outline: none !important;
    transform: scale(1);

    transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    &:disabled {
        @apply cursor-not-allowed opacity-40;
    }

    &::before {
        @apply h-[0.625em] w-[1.25em];

        content: "";

        background-color: currentColor;

        transition: clip-path 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    &:not(:checked) {
        @apply text-[rgb(var(--palette-background-bold))];

        &::before {
            clip-path: inset(0% 50% 0% 0% round var(--radius-pill));
        }

        &:enabled:is(:active, :hover),
        &[aria-pressed="true"] {
            @apply;

            background-color: rgba(var(--palette-background-bold), theme("opacity.50"));
        }
    }

    &:checked {
        @apply bg-[rgb(var(--palette-background-bold))] text-[rgb(var(--palette-foreground-normal))];

        &::before {
            clip-path: inset(0% 0% 0% 50% round var(--radius-pill));
        }

        &:enabled:is(:active, :hover),
        &[aria-pressed="true"] {
            @apply;

            background-color: rgba(var(--palette-background-bold), theme("opacity.75"));
        }
    }

    &:enabled:active,
    &[aria-pressed="true"] {
        transform: scale(0.95);

        &::before {
            clip-path: inset(0% 25% 0% 25% round var(--radius-pill));
        }
    }
}