@charset "UTF-8";
@if $use-flyout == true{

/*------------------------------------*\
    $FLYOUT
\*------------------------------------*/
/**
 * Flyouts are pieces of content that fly out of a parent when said parent is
 * hovered. They typically appear bottom-left of the parent.
 *
   <div class=flyout>
       Foo
       <div class=flyout__content>
           <h1>Lorem</h1>
           <p>Ipsum</p>
       </div>
   </div>
 *
 * Extend these objects in your theme stylesheet.
 *
 * Demo: jsfiddle.net/inuitcss/B52HG
 *
 */
.flyout,
.flyout--alt{
    position:relative;
    overflow:hidden;
}
    .flyout__content{
        /**
         * Position the flyouts off-screen. This is typically better than
         * `display:none;`.
         */
        position:absolute;
        top:100%;
        left:-99999px;
    }

    /**
     * Bring the flyouts into view when you hover their parents.
     * Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’
     * (`.flyout--alt`).
     */
    .flyout:hover,
    .flyout--alt:hover{
        overflow:visible;
    }

    /**
     * Regular flyouts sit all the way from the top, flush left.
     */
    .flyout:hover > .flyout__content{
        left:0;
    }

    /**
     * Alternative flyouts sit all the way from the left, flush top.
     */
    .flyout--alt:hover > .flyout__content{
        top:0;
        left:100%;
    }

}//endif