@use '../../src/sedna.scss' as sedna;

$asideMenuWidth: 220px;
.AsideMenu{
    @extend %SnList;
    &-header{
        font-weight: 500;
        padding: 8px 0;
        color: var(--text-color-alt);
        font-size: .9em;
    }
    &-item{
        padding-left: 8px;
        position: relative;
        margin-bottom: 4px;
        a{
            display: block;
            padding: 8px 0 8px 8px;
            color: var(--text-color);
        }
        &:hover{
            background: var(--hover-background);
            border-radius: 16px;
        }
        &.is-active{
            background: var(--sn-color-1);
            border-radius: 16px;
            a {
                color: var(--sn-color-1-i);
            }
        }
    }
    &-nav{
        overflow-y: auto;
        height: 100%;
        @include sedna.to(l){
            padding: .5rem;
        }
    }
    &-container{
        @include sedna.to(l){
            position: fixed;
            top: 0;
            left: -#{$asideMenuWidth};
            transition: left .4s;
            height: 100vh;
            background: var(--panel-background);
            z-index: 100;
            width: $asideMenuWidth;
        }
    }
}

.AsideMenu-is-show{
    .AsideMenu-container{
        left: 0;
        box-shadow: 1px 0 40px rgba(black,.2);
    }
}

#AsideMenu-toggle{
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    height: 2rem;
    width: 1.5rem;
    background: var(--panel-background);
    cursor: pointer;
    border: 1px solid var(--border-color);
    border-left: var(--panel-background);
    border-radius: 0 10px 10px 0;

    font-size: 1.4rem;
    @include sedna.from(l){
        display: none;
    }
}