/*
 * ==========================================
 * JRE FRONTEND ADMIN
 * ==========================================
 */


/*
 * ==========================================
 * GLOBAL CONTAINER
 * ==========================================
 */

.jre-global-admin-control {

    position:
        fixed;

    left:
        15px;

    bottom:
        15px;

    z-index:
        99999;

}


/*
 * ==========================================
 * ADMIN MENU WRAPPER
 * ==========================================
 */

.jre-admin-menu-wrapper {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

}


/*
 * ==========================================
 * ADMIN / LOGIN HOVEDKNAP
 * ==========================================
 *
 * Beholder den eksisterende mørke styling.
 */

.jre-admin-user,
.jre-admin-login {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 42px;

    width:
        42px;

    height:
        42px;

    padding:
        0;

    background-color:
        #3d3f46;

    color:
        #ffffff;

    border:
        1px solid #ddd;

    border-radius:
        50%;

    font-size:
        19px;

    line-height:
        1;

    cursor:
        pointer;

    text-decoration:
        none;

    box-shadow:
        0 2px 8px
        rgba(
            0,
            0,
            0,
            0.20
        );

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;

}


.jre-admin-user:link,
.jre-admin-user:visited,
.jre-admin-login:link,
.jre-admin-login:visited {

    color:
        #ffffff;

    text-decoration:
        none;

}


.jre-admin-user:hover,
.jre-admin-login:hover {

    background-color:
        #6c757d;

    color:
        #ffffff;

    transform:
        scale(1.08);

}


/*
 * ==========================================
 * UDFOLDELIG MENU
 * ==========================================
 *
 * Følger slideshow-navigationens styling.
 */

.jre-admin-expanded-menu {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;


    max-width:
        0;

    opacity:
        0;

    overflow:
        hidden;

    pointer-events:
        none;


    padding:
        0;


    background:
        rgba(
            255,
            255,
            255,
            0.40
        );


    border:
        0 solid
        rgba(
            0,
            0,
            0,
            0.08
        );


    border-radius:
        12px;


    box-shadow:
        none;


    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);


    transition:
        max-width 0.30s ease,
        opacity 0.20s ease,
        padding 0.30s ease,
        border-width 0.30s ease,
        box-shadow 0.30s ease;

}


/*
 * ==========================================
 * MENU VED MOUSEOVER
 * ==========================================
 */

.jre-admin-menu-wrapper:hover
.jre-admin-expanded-menu {

    max-width:
        240px;

    opacity:
        1;

    pointer-events:
        auto;

    padding:
        3px 3px;

    border-width:
        1px;

    box-shadow:
        0 4px 18px
        rgba(
            0,
            0,
            0,
            0.12
        );

}


/*
 * ==========================================
 * KNAPPER I UDFOLDET MENU
 * ==========================================
 *
 * Samme styling som slideshow-navigationens
 * almindelige knapper.
 */

.jre-admin-expanded-menu
.jre-global-admin-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;


    flex:
        0 0 34px;

    width:
        34px;

    height:
        34px;


    padding:
        0;


    background:
        transparent;


    color:
        rgba(
            0,
            0,
            0,
            0.72
        );


    border:
        none;


    border-radius:
        8px;


    font-family:
        inherit;

    font-size:
        18px;

    line-height:
        1;


    cursor:
        pointer;

    text-decoration:
        none;


    box-shadow:
        none;


    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        opacity 0.18s ease,
        transform 0.18s ease;

}


/*
 * Links i menuen
 */

.jre-admin-expanded-menu
.jre-global-admin-button:link,

.jre-admin-expanded-menu
.jre-global-admin-button:visited {

    color:
        rgba(
            0,
            0,
            0,
            0.72
        );

    text-decoration:
        none;

}


/*
 * ==========================================
 * HOVER PÅ MENU-KNAPPER
 * ==========================================
 */

.jre-admin-expanded-menu
.jre-global-admin-button:hover {

    background:
        rgba(
            0,
            0,
            0,
            0.07
        );

    color:
        rgba(
            0,
            0,
            0,
            0.95
        );

    transform:
        translateY(-1px);

}


/*
 * ==========================================
 * FOKUS
 * ==========================================
 */

.jre-admin-expanded-menu
.jre-global-admin-button:focus-visible {

    outline:
        2px solid
        rgba(
            0,
            0,
            0,
            0.45
        );

    outline-offset:
        2px;

}


/*
 * ==========================================
 * MOBIL
 * ==========================================
 */

@media (max-width: 600px) {

    .jre-global-admin-control {

        left:
            10px;

        bottom:
            10px;

    }


    .jre-admin-user,
    .jre-admin-login {

        flex:
            0 0 40px;

        width:
            40px;

        height:
            40px;

        font-size:
            18px;

    }


    .jre-admin-expanded-menu
    .jre-global-admin-button {

        flex:
            0 0 32px;

        width:
            32px;

        height:
            32px;

        font-size:
            17px;

    }


    .jre-admin-menu-wrapper:hover
    .jre-admin-expanded-menu {

        max-width:
            220px;

    }

}


/*
 * ==========================================
 * REDUCERET BEVÆGELSE
 * ==========================================
 */

@media (prefers-reduced-motion: reduce) {

    .jre-admin-expanded-menu,
    .jre-admin-expanded-menu
    .jre-global-admin-button {

        transition:
            none;

    }

}