/**
 * @copyright   2010-2013, The Titon Project
 * @license     http://opensource.org/licenses/bsd-license.php
 * @link        http://titon.io
 */

@import "../common";

.#{$vendor-prefix}flyout {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    background: $gray;
    @include box-sizing(content-box); // required by MooTools for multi columns
    @include transition(opacity $flyout-transition);

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        float: left;
        width: 200px;
    }

    li {
        position: relative;

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

            .caret-right { display: none; }
        }

        // Hover states
        > a:hover,
        &.#{$state-is-prefix}open > a {
            background: $gray-lightest;
        }

        // Display caret arrow
        &.#{$state-has-prefix}children > a .caret-right {
            float: right;
            display: inline-block; // reveal
            margin-top: 3px;
        }

        // Nested flyouts
        > .#{$vendor-prefix}flyout {
            left: 90%;
            @include transition(left $flyout-transition, right $flyout-transition, opacity $flyout-transition);

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

        &.#{$state-is-prefix}open > .#{$vendor-prefix}flyout {
            opacity: 1;
            visibility: visible;
            left: 100%;

            &.push-left {
                left: auto;
                right: 100%;
            }
        }
    }

    @include clear-fix;
}

.#{$vendor-prefix}flyout-heading {
    padding: $small-padding;
    line-height: 100%;
    display: block;
    text-decoration: none;
    background: $gray-dark;
}