/**
 * @copyright   2010-2015, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@import "../common";

#{$drop-class} {
    @include reset-list;
    text-align: left;
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    line-height: 100%;
    z-index: $drop-zindex;
    opacity: 0;
    visibility: hidden;
    transition: left $drop-transition, opacity $drop-transition, visibility $drop-transition;

    // Nested
    #{$drop-class} {
        display: block;
        top: 0;
        left: 90%;
        z-index: $drop-zindex + 1;
    }

    ul,
    ol {
        @include reset-list;
    }

    li {
        position: relative;

        > a {
            padding: $small-padding;
            display: block;

            .caret-right {
                float: right;
                display: none;
            }
        }

        &.has-children {
            > a .caret-right { display: inline-block; }
        }

        // Show nested dropdown
        &:hover {
            #{$drop-class} {
                visibility: visible;
                opacity: 1;
                left: 100%;
            }
        }
    }
}

#{$drop-class-divider} {
    margin: ($margin / 2) 0;
    border-top: 1px solid $gray-dark;
}

#{$drop-class-heading} {
    padding: $small-padding;
}

//-------------------- Modifiers --------------------//

@if index($drop-modifiers, "up") {
    #{$drop-class-modifier-up} {
        top: auto;
        bottom: 100%;
    }
}

@if index($drop-modifiers, "right") {
    #{$drop-class-modifier-right} {
        top: auto;
        left: 100%;
    }
}

@if index($drop-modifiers, "left") {
    #{$drop-class-modifier-left} {
        top: auto;
        left: auto;
        right: 100%;
    }
}

@if index($drop-modifiers, "right") or index($drop-modifiers, "left") {
    #{$drop-class-modifier-right},
    #{$drop-class-modifier-left} {
        &.reverse-align {
            bottom: 0;
        }
    }
}

@if index($drop-modifiers, "down") or index($drop-modifiers, "up") {
    #{$drop-class-modifier-down},
    #{$drop-class-modifier-up} {
        &.reverse-align {
            left: auto;
            right: 0;
        }
    }
}