[type="checkbox"] {
    --palette-background-bold: var(--palette-neutral-bold);
    --palette-foreground-normal: var(--palette-light-normal);

    --size-text-size: var(--document-font-size);
    --size-text-line-height: var(--document-font-line-height);
}

[type="checkbox"]:not([role]) {
    @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)]
    whitespace-nowrap;

    border-radius: var(--radius-small);

    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-[0.625em];

        content: "";

        background-color: currentColor;

        clip-path: inset(50% 50% 50% 50% round 0.2em);
        transition: clip-path 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

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

    &:not(:checked) {
        &:enabled:is(:active, :hover),
        &[aria-pressed="true"] {
            &::before {
                clip-path: inset(0% 0% 0% 0% round 0.2em);
            }
        }
    }

    &:checked {
        &::before {
            clip-path: inset(0% 0% 0% 0% round 0.2em);
        }
    }

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

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

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

            &: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))];

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

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

    &[data-variation="flush"] {
        &:not(:checked) {
            @apply text-[rgb(var(--palette-background-bold))];

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

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

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

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

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