// 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   : 10px;
@dropdown-margin-horizontal : 10px;

body when (@responsive), (@adaptive) {
    &[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, .mobile-menu.dropdown {
    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 0 7px fade(#000, 50%));

    &.open {
        display : block;
    }

    &.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), (@adaptive) {
        ul:extend(.mobile-menu ul all) {
        }
        li:extend(.mobile-menu li all) {
        }
    }
}
[data-dropdown-open] .dropdown-menu-mobile {
    &: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 {
    }
}