@layer components {
    [class*="button"],
    button {
        --bg-opacity: 1;
        --bg: var(--primary);

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: calc(var(--spacing) * 0.5);
        padding: calc(var(--spacing) * 0.75) calc(var(--spacing) * 1.5);

        background-color: oklch(from var(--bg) l c h / var(--bg-opacity));
        color: var(--color, white);
        color: var(--color, contrast-color(var(--primary)));

        border: none;
        border-radius: var(--radius);
        text-decoration: none;

        font-weight: 600;
        font-size: 0.875rem;
        cursor: pointer;

        transition: 0.25s ease;

        &:hover {
            --bg-opacity: 0.85;
        }

        &:disabled {
            cursor: not-allowed;
            opacity: 0.5;
        }
    }

    .button-ghost {
        --bg-opacity: 0;
        --bg-lightness: 1;
        --bg-saturation: 0.7;
        --color: oklch(from var(--primary-text) l c h / 0.75);
        background-color: hsl(
            from var(--bg) h calc(s * var(--bg-saturation))
                calc(l * var(--bg-lightness)) / var(--bg-opacity)
        );

        &:hover {
            --bg-opacity: 0.3;
        }

        &:active,
        &.active {
            --bg-opacity: 0.4;
            --bg-lightness: 1.05;
            --bg-saturation: 0.25;
        }
    }

    .button-danger {
        --bg: var(--danger);
        --saturation: 80%;
        --color: hsl(from var(--danger) h var(--saturation) l);

        &:hover {
            --saturation: 100%;
        }
    }

    .button-icon {
        padding: 0.5rem;
    }

    .button-round {
        border-radius: 100vw;
    }
}