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

@import "../common";

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

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

        ul,
        ol {
            @include reset-list;
        }

        li {
            position: relative;

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

                .caret-right,
                .caret-left {
                    float: $align-opposite-direction;
                    display: none;
                }
            }

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

            // Show nested dropdown
            &:hover {
                #{$drop-class} {
                    visibility: visible;
                    opacity: 1;
                    #{$align-direction}: 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;
            }
        }
    }
}