@import url('meta');
@import url('color');
@import url('glue');

@{NS}.slide-menu {
    ._content {
        .bordered;
        .box_shadow;
        .css_transition;
        position: fixed;
        z-index: 1000;
        width: 100%;
        height: 100%;
        background: @white;
    }

    ._overlay {
        opacity: 0;
        position: fixed;
        visibility: hidden;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        z-index: -1;
        -webkit-transition: opacity .3s, background .3s, visibility .3s, transform .3s, z-index .3s .3s;
        -o-transition: opacity .3s, background .3s, visibility .3s, transform .3s, z-index .3s .3s;
        transition: opacity .3s, background .3s, visibility .3s, transform .3s, z-index .3s .3s;
    }

    &._display {
        ._overlay {
            .css_transition;
            opacity: 1;
            visibility: visible;
            z-index: 999;
            background: rgba(0,0,0,.5);
        }
    }
}