/* ============================================================
   Buttons
   ============================================================ */


/* ------------------------------------------------------------
   Grundbutton
   ------------------------------------------------------------ */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding:
        var(--abstand-2) var(--abstand-4);

    border: 1px solid transparent;
    border-radius: var(--radius-normal);

    font: inherit;
    font-weight: 600;
    line-height: 1.2;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

/* ------------------------------------------------------------
   Primär
   ------------------------------------------------------------ */

.button-primaer {
    background-color: var(--farbe-primaer);
    border-color: var(--farbe-primaer);

    color: var(--weiss);
}


.button-primaer:hover {
    background-color: var(--farbe-primaer-hover);
    border-color: var(--farbe-primaer-hover);

    color: var(--weiss);
}


.button-primaer:active {
    background-color: var(--farbe-primaer-aktiv);
    border-color: var(--farbe-primaer-aktiv);
}

/* ------------------------------------------------------------
   Sekundär
   ------------------------------------------------------------ */

.button-sekundaer {
    background-color: var(--farbe-oberflaeche);

    border-color: var(--farbe-rahmen-stark);

    color: var(--farbe-text);
}


.button-sekundaer:hover {
    background-color: var(--farbe-oberflaeche-dezent);

    border-color: var(--gruen-500);

    color: var(--farbe-primaer);
}

/* ------------------------------------------------------------
   Dezent
   ------------------------------------------------------------ */

.button-dezent {
    background-color: transparent;
    border-color: transparent;

    color: var(--farbe-primaer);
}


.button-dezent:hover {
    background-color: var(--gruen-50);

    color: var(--farbe-primaer-aktiv);
}

/* ------------------------------------------------------------
   Gefahr
   ------------------------------------------------------------ */

.button-gefahr {
    background-color: var(--fehler);
    border-color: var(--fehler);

    color: var(--weiss);
}


.button-gefahr:hover {
    background-color: var(--fehler-hover);
    border-color: var(--fehler-hover);

    color: var(--weiss);
}

/* ------------------------------------------------------------
   Klein
   ------------------------------------------------------------ */

.button-klein {
    min-height: 34px;

    padding:
        6px var(--abstand-3);

    font-size: 0.875rem;
}


/* ------------------------------------------------------------
   Standard
   ------------------------------------------------------------ */

.button {
    min-height: 40px;
}

/* ------------------------------------------------------------
   Deaktiviert
   ------------------------------------------------------------ */

.button:disabled,
.button.deaktiviert {
    opacity: 0.55;

    cursor: not-allowed;

    pointer-events: none;
}