.admin-bar{
    .#{$prefix}-mobile-menu{
        top: 30px;
    }
}
.#{$prefix}-mobile-menu{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 11;
    top: 0;
    bottom: 0;
    left: -100%;
    background-color: $color_white;
    padding: 30px;
    color: $color_black;
    overflow-y: auto; 
    transition: all 0.5s ease;
    
    @include media(sm){
        width: 500px;
    }

    &.show{
        left: 0;
    }
    .#{$prefix}-mobile-close-section{
        text-align: right;
    }

    .#{$prefix}-nav-menu{
        @extend %reset-ul;
        ul{
            @extend %reset-ul;
        }
        li{
            a{
                display: block;
                font-weight: $font_semi_bold;
                font-size: 1rem;
                line-height: 1;
                padding: 10px 0;
                color: $color_black;
            }
        }
        .sub-menu,
        .children{
            padding-left: 15px;
            a{
                font-size: 0.9rem;
            }
        }
    }
    .right-arrow,
    .down-arrow{
        >a{
            position: relative;
            &:after{
                display: inline-block;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                @extend %ionicons;
                content: '\f3d0';
                padding: 0 10px;
                font-size: 1rem;
            }
        }
    }
}