/* =========================================
   TOPBAR BUTTONS
   medienmatrixx Website-Monitor
   ========================================= */

/* Basis: Beide Buttons */
.topbar .topbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 19px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 9999px;
    background: transparent;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

/* -----------------------------------------
   Benutzer & Passwort
   ----------------------------------------- */

/* Hover */
.topbar a.topbar-button:hover,
.topbar a.topbar-button:focus-visible {
    background: #000;
    border-color: #fff;
    color: #fff;
    text-decoration: none;
}

/* Aktive Seite */
.topbar a.topbar-button.is-active,
.topbar a.topbar-button[aria-current="page"],
.topbar a.topbar-button:active {
    background: #000;
    border-color: #fff;
    color: #fff;
}

/* -----------------------------------------
   Abmelden
   ----------------------------------------- */

/* Normalzustand */
.topbar .topbar-button.topbar-button-logout {
    background: #35353b;
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

/* Hover */
.topbar .topbar-button.topbar-button-logout:hover,
.topbar .topbar-button.topbar-button-logout:focus-visible {
    background: #606068;
    border-color: #fff;
    color: #fff;
}

/* Beim Klicken */
.topbar .topbar-button.topbar-button-logout:active {
    background: #707078;
    border-color: #fff;
    color: #fff;
}

/* -----------------------------------------
   Tastaturfokus
   ----------------------------------------- */

.topbar .topbar-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}