button,
[role="button"],
[type="button"],
[type="reset"],
[type="submit"] {
    --palette-background-light: var(--palette-neutral-light);
    --palette-background-normal: var(--palette-neutral-normal);
    --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);

    @apply align-middle border-2 border-transparent border-solid font-bold cursor-pointer
    gap-[var(--spacing-local-small)] inline-flex items-center justify-center
    leading-[var(--size-text-line-height)] px-[var(--spacing-local-small)] py-[var(--spacing-local-tiny)]
    relative select-none whitespace-nowrap z-0;

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

    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),
        border-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);

    &:is(:disabled, [aria-disabled="true"]) {
        @apply cursor-not-allowed opacity-40;
    }

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

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

        &:not(:disabled, [aria-disabled="true"]) {
            &:is(:focus, :hover) {
                @apply bg-[rgb(var(--palette-background-normal))];
            }

            &:is(:active, [aria-current], [aria-pressed="true"]) {
                @apply bg-[rgb(var(--palette-background-light))];
            }
        }
    }

    &[data-variation="clear"] {
        @apply bg-transparent text-[rgb(var(--palette-background-bold))];

        &:not(:disabled, [aria-disabled="true"]) {
            &:is(:focus, :hover) {
                @apply;

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

            &:is(:active, [aria-current], [aria-pressed="true"]) {
                @apply text-[rgb(var(--palette-foreground-normal))];

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

    &[data-variation="outline"] {
        @apply bg-transparent border-[rgb(var(--palette-background-bold))] text-[rgb(var(--palette-background-normal))];

        &:not(:disabled, [aria-disabled="true"]) {
            &:is(:focus, :hover) {
                @apply;

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

            &:is(:active, [aria-current], [aria-pressed="true"]) {
                @apply bg-[rgb(var(--palette-background-bold))] border-transparent text-[rgb(var(--palette-foreground-normal))];
            }
        }
    }
}