// Example code for dropdown menu
// <span class="menu-btn _BUTTON POSITION_" data-menu-position="top|right|left|bottom">_SAMPLE TEXT_</span>
// _BUTTON POSITION_ - left|right

// Example code for sub main menu
//{ifpages}
//  <span class="sub-menu-btn d-hide"></span> - button for sub menu
//{/ifpages}

@mobile-bar-zindex : 100;

@top-block        : true;
@top-block-height : unit(@button-line-height * 3, em);
@top-block-bg     : @header-bg;
@top-block-color  : @header-color;

@bottom-block        : false;
@bottom-block-height : unit(@button-line-height * 3, em);
@bottom-block-bg     : @primary-bg;
@bottom-block-color  : @primary-color;

@menu-line-height : unit(@button-line-height * 3, em);
@menu-bg          : #000;
@menu-color       : #fff;
// Used for left and right menu
@menu-width       : 300px;
// Used for top and bottom menu
@menu-height      : 300px;

& when (@responsive), (@adaptive){
    @media (min-width : (@responsive-size-tablet + 1)){
        .mobile-bar, .mobile-menu{
            display : none;
        }
    }
    @media only screen and (max-width : @responsive-size-tablet){
        body{
            & when (@top-block){
                padding-top : @top-block-height;
            }
            & when (@bottom-block){
                padding-bottom : @bottom-block-height;
            }
            &[data-menu-open], &[data-overlay] {
                overflow : hidden;

                &::after {
                    content  : '';
                    position : fixed;
                    top      : 0;
                    left     : 0;
                    right    : 0;
                    bottom   : 0;
                    z-index  : @mobile-bar-zindex + 1;
                }
            }
        }

        [data-menu-open], &[data-overlay] {
            &::after {
                .rgba(#000000; 50);
            }
        }
    }

    .mobile-bar{
        position : fixed;
        left     : 0;
        right    : 0;
        z-index  : @mobile-bar-zindex;
        .box-shadow(0 0 7px #000);
        .clearfix-mixin();

        @media only print{
            &{
                display : none;
            }
        }

        //.btn{
        //    line-height : inherit;
        //
        //    &.btn-caption when (@button-type-caption) and (@button-types){
        //        line-height : (@bottom-block-height / 2) - .5;
        //
        //        &:before{
        //            line-height : inherit;
        //        }
        //    }
        //}

        &.top when (@top-block){
            top         : 0;
//        height        : @top-block-height;
            line-height : @top-block-height;
            color       : @top-block-color;
            background  : @top-block-bg;

            //.btn{
            //    &.icon when (@flexkit-icons) and (@button-type-icon) and (@button-types){
            //        width : @top-block-height;
            //    }
            //}
        }

        &.bottom when (@bottom-block){
            bottom      : 0;
            //        height      : @bottom-block-height;
            line-height : @bottom-block-height;
            color       : @bottom-block-color;
            background  : @bottom-block-bg;

            //.btn{
            //    &.icon when (@flexkit-icons) and (@button-type-icon) and (@button-types){
            //        width : @bottom-block-height;
            //    }
            //}
        }
    }

    .mobile-menu{
        // reset style for menu
        float      : none;
        height     : auto;
        text-align : left;
        margin     : 0 !important;
        padding    : 0;
        //style menu mobile
        width      : 80%;
        max-width  : @menu-width;
        position   : fixed;
        z-index    : 0;
        overflow   : auto;
        .gradient-vertical(#424242 0%, #0f0f0f 100%);
        color      : @menu-color;


        &.left, &.right{
            top    : 0;
            bottom : 0;
        }

        &.left{
            left : 0;
        }

        &.right{
            right : 0;
        }

        &.top, &.bottom{
            left       : 0;
            right      : 0;
            width      : auto;
            height     : @menu-height;
            max-height : 80%;
            max-width  : none;
        }

        &.top{
            top : 0;
        }

        &.bottom{
            bottom : 0;
        }

        ul{
            background  : transparent;
            color       : inherit;
            position    : relative;
            line-height : @menu-line-height;
            width       : auto;
            .box-shadow(none);
            &.main_menu {
                display: block;
            }


            li {
                display: block;
                text-align: left;
            }

            a{
                padding-top    : 0;
                padding-bottom : 0;
                overflow       : hidden;

                &:hover, &.current{

                }
            }

            ul{
                .rgba(#000; 3);

                a{
                    padding-left : @padding-base-horizontal * 2;
                }
                &.open{
                    display : block !important;
                }
            }
            //li.cat-1 {
            //    .sub-menu-btn {display: none}
            //}
            //li.cat-2 {
            //    ul {
            //        right: 0;
            //    }
            //}
            //li.cat-3 {
            //    .sub-menu-btn {display: none}
            //}
            //li.cat-4 {
            //    ul {
            //        right: 0;
            //    }
            //}

        }

        li{
            float         : none;
            border-bottom : 1px solid @gray-darker;

            &:hover{
                & when not(@nav-bg = @nav-bg-li-hover){
                    background : transparent;
                }
                & when not(@nav-color = @nav-color-li-hover){
                    color : inherit;
                }

                ul{
                    display : none;
                }
            }

            li{
                border     : none;
                border-top : 1px solid @gray-darker;
            }
        }
    }

    .menu-btn{
        cursor     : pointer;
        background : transparent;
        padding    : 0 @padding-base-horizontal;
        .inline-block();
        text-transform : uppercase;
        .user-select();

//        &:before{
//            content    : '';
//            height     : @top-block-height / 3;
//            width      : @top-block-height / 3;
//            margin-top : @top-block-height / 3;
//            .transition();
//            .gradient-vertical(#fff 0%, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%, #fff 100%);
//
//            .mobile-bar.bottom &{
//                margin-top : (@bottom-block-height - @top-block-height / 3) / 2;
//            }
//        }

        &.left{
            float : left;

            &:before{
                margin-right : @top-block-height / 10;
                float        : left;
            }
        }
        &.right{
            float      : right;
            text-align : right;

            &:before{
                margin-left : @top-block-height / 10;
                float       : right;
            }
        }

        &.icon{
            width       : @top-block-height;
            text-indent : -9999px;

            &:before{
                margin-right : 0;
                margin-left  : 0;
            }
        }

        &:hover, &.active{
            .rgba(#000; 10);
        }

        &.active{
        }
    }

    .sub-menu-btn{
        float      : right;
        width      : unit(@button-line-height * 2.5, em);
        text-align : center;
        color      : @primary-color;

        &:before{
            content : '';
            height  : 20px;
            width   : 20px;
            .inline-block();
            .gradient-vertical(#fff 0%, #fff 10%, transparent 10%, transparent 45%, #fff 45%, #fff 55%, transparent 55%, transparent 90%, #fff 90%, #fff 100%);
        }

        &:hover, &.active{
            .rgba(#000, 20);
        }
    }
    @media only screen and (max-width : @responsive-size-tablet){
        & when (@mobile-menu-over){
            @import "menu/over";
        }
        & when (@mobile-menu-under) and not(@mobile-menu-over){
            @import "menu/under";
        }
    }
}
& when (@mobile-dropdown){
    @import "menu/dropdown";
}