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

@import "../common";

/**
 * Should be used in conjunction with the JavaScript Titon.Flyout module.
 */

.flyout {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    background: $gray;
    border: 1px solid $gray-dark;
    @include box-sizing(content-box); // required by MooTools for multi columns
    @include transition(opacity 0.3s);

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

        li {
            position: relative;

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

            > a .caret-right { display: none; }

            &.has-children > a .caret-right {
                float: right;
                display: inline-block; // reveal
                margin-top: 3px;
            }

            // Sub-flyouts
            > .flyout {
                left: 90%;
                @include transition(left .3s, right .3s, opacity .3s);

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

            &.is-open > .flyout {
                opacity: 1;
                visibility: visible;
                left: 100%;

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

    @include clear-fix;
}