@layer components {
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-xs);
        border-radius: var(--radius-md);
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s ease;
        cursor: pointer;
        border: var(--border-thin) solid transparent;
        line-height: 1.25;

        & .button__icon {
            width: 1.25rem;
            height: 1.25rem;
            flex-shrink: 0;
        }

        & .button__text {
            position: relative;
            display: inline-flex;
            flex-direction: column;
            align-items: center;

            &::after {
                content: attr(data-text);
                content: attr(data-text) / "";
                height: 0;
                visibility: hidden;
                overflow: hidden;
                user-select: none;
                pointer-events: none;
                font-weight: 700; /* Bold weight */
            }
        }

        /* Full-width option */
        &.button--block {
            width: 100%;
        }

        /* Sizes */
        &.button--small {
            padding: var(--space-xs) var(--space-md);
            font-size: var(--text-sm);
        }

        &.button--normal {
            padding: 0.75rem 1.5rem;
            font-size: var(--text-base);
        }

        &.button--big {
            padding: 1rem 2rem;
            font-size: var(--text-lg);
            font-weight: 700;
        }

        &.button--xl {
            padding: 1.5rem 3rem;
            font-size: var(--text-2xl);
            font-weight: 900;
            border-radius: var(--radius-2xl);
            width: fit-content;
            flex-direction: row;
            box-shadow: var(--button-shadow, none);
        }

        /* Colors */
        &.button--default {
            background-color: var(--clr-slate-800);
            color: var(--color-white);
            border-color: var(--clr-slate-700);

            &:hover {
                background-color: var(--clr-slate-700);
                border-color: var(--clr-slate-600);
            }
        }

        &.button--white {
            background-color: var(--color-white);
            color: var(--clr-slate-900);

            &:hover {
                background-color: var(--clr-slate-100);
            }
        }

        &.button--hero {
            background-color: var(--color-primary);
            color: var(--clr-slate-900);
            font-weight: 700;
            box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-primary), transparent 80%);

            &:hover {
                background-color: var(--color-primary-hover);
            }
        }

        &.button--red {
            background-color: var(--clr-red-600);
            color: var(--color-white);
            font-weight: 900;
            box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.2);

            &:hover {
                background-color: var(--clr-red-500);
            }
        }

        &.button--green {
            background-color: var(--clr-mint-600);
            color: var(--clr-slate-950);
            font-weight: 600;

            &:hover {
                background-color: var(--clr-mint-500);
            }
        }

        &.button--rounded {
            border-radius: var(--radius-full);
        }

        /* Icon only button */
        &:not(:has(.button__text)) {
            padding: 0;
            aspect-ratio: 1/1;
            width: fit-content;
            min-width: 2.5rem;
            min-height: 2.5rem;

            & .button__icon {
                margin: 0;
            }

            &.button--small {
                min-width: 2rem;
                min-height: 2rem;
            }

            &.button--big {
                min-width: 3.5rem;
                min-height: 3.5rem;
            }
        }
    }
}