/*
=====================================================
 EF22 FRAMEWORK
 BUTTONS.CSS
 Version 1.0
=====================================================
*/

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

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    min-height: 48px;
    padding:
        0
        var(--space-lg);
    border:
        2px solid
        var(--color-primary);
    border-radius:
        var(--radius-md);
    background: transparent;
    color: inherit;
    font-size:
        var(--font-size-md);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}


/* ==========================================
   PRIMÄR
========================================== */

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


/* ==========================================
   INTERAKTION
========================================== */

.button:hover {
    background:
        var(--color-primary);
    color:
        var(--color-black);
}

.button--primary:hover {
    background:
        var(--color-primary-dark);
    border-color:
        var(--color-primary-dark);
}

.button:focus-visible {
    outline:
        2px solid
        var(--color-primary);
    outline-offset: 3px;
}


/* ==========================================
   BUTTON-GRUPPE
========================================== */

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top:
        var(--space-xl);
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 480px) {

    .button-group .button {
        flex: 1 1 100%;
    }

}