.ingite-sidenav-overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    opacity:0;
    height:120vh;
    z-index:998;
    display:none;
    transition:opacity .15s, background-color .15s;
    background-color:rgba(0,0,0,0.5);
    &:hover{
        background-color:rgba(0,0,0,0.45);
    }
}

body.with-ingite-sidenav-active{
    overflow:hidden;
    .ingite-sidenav-overlay{
        display:block;
    }
    #wpadminbar{
        z-index:997;
    }
}

.ingite-sidenav {
    position:fixed;
    width:300px;
    left:auto;
    right:0;
    top:0;
    margin:0;
    transform:translateX(105%);
    height:100%;
    height:calc(100% + 60px);
    padding-bottom:60px;
    background-color:var(--ingite-color-sidenav,    var(--ingite-color-surface));
    color:           var(--ingite-color-on-sidenav, var(--ingite-color-on-surface));
    z-index:999;
    backface-visibility:hidden;
    will-change:transform;
    transition:transform .15s ease;
    -webkit-box-shadow:var(--shadow-1);
    box-shadow:        var(--shadow-1);
    &.active{
        transform:translateX(0);
    }
    ul{
        list-style:none;
        margin:0;
        padding-left:0;
        li {
            min-height:48px;
            line-height:48px;
        }
    }
    a{
        color:inherit;
    }
    .ingite-collapsible-item{
        background:transparent;
        color:inherit;
        .ingite-collapsible-header, .ingite-collapsible-body{
            transition:all .15s;
            color:inherit;
        }
        .active{
            border-color:transparent;
            .ingite-collapsible-header, .ingite-collapsible-body{
                background:rgba(0,0,0,.05)
            }
        }
        .ingite-collapsible-body{
            padding:0;
        }
    }
}

.ingite-sidenav ul li .ingite-sidenav-menu-item-content{
    display:block;
    font-size:14px;
    font-weight:500;
    height:48px;
    line-height:48px;
    padding:0 0.5rem;
    text-decoration:none;
    transition:all .15s;
    &:hover, &.open{
        background-color:rgba(0,0,0,0.025);
    }
    i{
        display:inline-block;
        float:left;
        font-size:24px;
        height:inherit;
        line-height:inherit;
        margin:0;
        &.left, &:not(.right){
            margin-right:0.5rem;
        }
        &.right{
            float:right;
            margin-left:0.5rem;
        }
    }
}

#ingite-sidenav-info{
    padding:1rem;
    &.ingite-sidenav-user-info{
        --bg:#313132;
        --fg:#FFFFFF;
    }
    &.ingite-sidenav-site-info{
        --bg:#FFFFFF;
        --fg:#000000;
    }
    &.ingite-sidenav-user-info, &.ingite-sidenav-site-info{
        background-color:var(--ingite-color-sidenav-info,    var(--bg));
        color:           var(--ingite-color-on-sidenav-info, var(--fg));
    }
    .site-logo{
        max-width:80%;
        max-height:64px;
    }
    .user-avatar{
        border-radius: 50%;
        display: block;
        height: 64px;
        width: 64px;
        border:1px solid #eeeeee;
        -webkit-box-shadow:var(--shadow-1);
        box-shadow:        var(--shadow-1);
    }
    .primary-information, .secondary-information{
        display: block;
        font-size: 14px;
        line-height: 24px;
    }
    .primary-information{
        font-weight: 500;
        margin-top: 16px;
    }
    .secondary-information {
        font-weight: 400;
    }
}