.mobile-menu{
    z-index : @mobile-bar-zindex + 2;
    .transition(all; 0.3s);

    &.top{
        .transform(translateY(-100%));
    }

    &.bottom{
        .transform(translateY(100%));
    }

    &.left{
        .transform(translateX(-100%));
    }

    &.right{
        .transform(translateX(100%));
    }

    [data-menu-open] &{
        .box-shadow(0 0 30px @gray-dark);
    }

    [data-menu-open="left"] &.left, [data-menu-open="right"] &.right{
        .transform(translateX(0));
    }

    [data-menu-open="top"] &.top, [data-menu-open="bottom"] &.bottom{
        .transform(translateY(0));
    }
}

.menu-btn{

    &.active{
        .rgba(#000; .05);
    }

    &:before{
        width : @top-block-height / 3.5;
    }

    &.left{
        padding-left : 0;

        &:before{
        }

        &.active{
            &:before{
                margin-left  : -(@top-block-height / 5);
                margin-right : (@top-block-height / 10) + (@top-block-height / 5);
            }
        }
    }

    &.right{
        padding-right : 0;

        &:before{
        }

        &.active{
            &:before{
                margin-right : -(@top-block-height / 5);
                margin-left  : (@top-block-height / 10) + (@top-block-height / 5);
            }
        }
    }
}

body{

    &[data-menu-open]{
        main{
//            overflow : hidden;

//            &:after{
//                content  : '';
//                position : fixed;
//                top      : 0;
//                left     : 0;
//                right    : 0;
//                bottom   : 0;
//                z-index  : @mobile-bar-zindex - 1;
//                .rgba(#000; .25);
//                .transition(all; 0.75s);
//            }
        }
    }
}