@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 */
            }
        }

        /* 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;
        }

        /* 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--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);
        }
    }
}