/* ========================================
   BUTTON
======================================== */

.button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding-inline: var(--space-6);

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

    font-size: 14px;
    font-weight: var(--font-weight-bold);
    line-height: 1;

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        color var(--transition-fast);
}


/* ========================================
   BUTTON - PRIMARY
======================================== */

.button--primary {
    color: var(--color-white);
    background-color: var(--color-orange);
}

.button--primary:hover {
    transform: translateY(-2px);
}