@import "globals.css";

.generic-button
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
    border: none;
    font-family: inherit;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    justify-content: center;
    min-height: 3rem; /* ensure buttons are tall enough */
    padding-inline: var(--space-md);
    padding-block: var(--space-xs);
    border-radius: var(--radius-main); /* rounded corners */
    
    /* Smooth transitions */
    transition: 
        background-color 0.2s ease, 
        transform 0.1s ease, 
        box-shadow 0.2s ease;
}

.generic-button:active 
{
    transform: scale(0.92); /* Simulate a press effect */
}

/* Primary Styling Modifier */
.generic-button--primary 
{
    background-color: var(--color-primary);
    color: var(--color-text);
}

.generic-button--primary:hover 
{
    /* Slightly lighten the primary using color-mix for hover state */
    background-color: color-mix(in oklch, var(--color-primary), white 15%);
    box-shadow: 0 4px 12px oklch(0% 0 0 / 25%);
}