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

@dropdown-bg                : #fff;
@dropdown-color             : @text-color;
@dropdown-width             : 250px;
@dropdown-margin-vertical   : 5px;
@dropdown-margin-horizontal : 5px;

body when (@responsive){
    &[data-dropdown-open]:extend(body[data-menu-open]){

        &:after:extend(body[data-menu-open]:after){
        }
    }
}

@media only screen and (max-width : @responsive-size-tablet){
    &{
        .dropdown-menu-mobile{
            display : none;
        }
    }
}
.dropdown-menu{
    background : @dropdown-bg !important;
    color      : @dropdown-color !important;
    position   : absolute;
    z-index    : @mobile-bar-zindex + 2 !important;
    width      : @dropdown-width;
    display    : none;
    margin     : 0 !important;
    overflow   : auto;
    .box-shadow(0 2px 30px fade(#000, 30%));

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

        &-left{
            left  : 0;
            right : auto;
        }
    }

    &.top{
        &, &-left, &-right{
            top    : auto;
            bottom : 100%;

            &.inner{
                top    : 0;
                bottom : auto;
            }
        }
    }

    &.bottom{
        &, &-left, &-right{
            top    : 100%;
            bottom : auto;

            &.inner{
                top    : auto;
                bottom : 0;
            }
        }
    }

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

        &-bottom{
            top    : auto;
            bottom : 0;
        }
    }

    &.left{
        &, &-top, &-bottom{
            left  : auto;
            right : 100%;

            &.inner{
                left  : 0;
                right : auto;
            }
        }
    }

    &.right{
        &, &-top, &-bottom{
            left  : 100%;
            right : auto;

            &.inner{
                right : 0;
                left  : auto;
            }
        }
    }

//    nav{
//        a{
//            display : block;
//            padding : @padding-base-vertical @padding-base-horizontal;
//            .link-color(@gray);
//
//            &:hover{
//                background : @gray-lighter;
//            }
//
//            & + a{
//                border-top : 1px solid @gray-lighter;
//            }
//        }
//    }

    & when (@responsive){
        ul:extend(.mobile-menu ul all){ }
        li:extend(.mobile-menu li all){ }
    }
}
[data-dropdown-open] .dropdown-menu{
    &:extend(.dropdown-menu);
    position   : fixed;
    max-width  : 90%;
    max-height : 70%;

    &.open{
        display : block;
    }

    &.centered{
        top    : 50%;
        left   : 0;
        right  : 0;
        margin : auto !important;
        .transform(translateY(-50%));
    }

    &.center{
        top    : 0;
        bottom : 0;
        left   : 0;
        right  : 0;
        margin : auto !important;
    }

    &.top{
        top    : @dropdown-margin-vertical;
        bottom : auto;
    }

    &.bottom{
        bottom : @dropdown-margin-vertical;
        top    : auto;
    }

    &.right{
        right : @dropdown-margin-horizontal;
        left  : auto;
    }

    &.left{
        left  : @dropdown-margin-horizontal;
        right : auto;
    }
}

.dropdown-btn{
    &:hover{
    }

    &.active{
    }
}