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

@import "../common";

@include export("flyout") {
    #{$flyout-class} {
        position: absolute;
        top: 0;
        #{$align-direction}: 0;
        z-index: $flyout-zindex;
        opacity: 0;
        visibility: hidden;
        transition: opacity $flyout-transition, visibility $flyout-transition;

        ul {
            @include reset-list;
            float: $align-direction;
            width: 200px;
        }

        li {
            position: relative;

            > a {
                padding: $small-padding;
                line-height: 100%;
                display: block;
                text-decoration: none;

                .caret-right,
                .caret-left { display: none; }
            }

            // Display caret arrow
            &.has-children > a {
                .caret-right,
                .caret-left {
                    float: $align-opposite-direction;
                    display: inline-block; // reveal
                    margin-top: 3px;
                }
            }

            // Nested flyouts
            > #{$flyout-class} {
                #{$align-direction}: 90%;
                transition: left $flyout-transition, right $flyout-transition, opacity $flyout-transition, visibility $flyout-transition;

                // Reverse menu to left side in case it goes outside the viewport
                // Will be set automatically from the Javascript layer
                &.push-opposite {
                    #{$align-direction}: auto;
                    #{$align-opposite-direction}: 90%;
                }
            }

            &.is-open > #{$flyout-class} {
                opacity: 1;
                visibility: visible;
                #{$align-direction}: 100%;

                &.push-opposite {
                    #{$align-direction}: auto;
                    #{$align-opposite-direction}: 100%;
                }
            }
        }

        @include clear-fix;
    }

    #{$flyout-class-heading} {
        padding: $small-padding;
        line-height: 100%;
        display: block;
        text-decoration: none;
    }
}