// Name:            Drop
// Description:     Component to position any element next to any other element.
//
// Component:       `ui-drop`
//
// Modifiers:       `ui-drop-top-*`
//                  `ui-drop-bottom-*`
//                  `ui-drop-left-*`
//                  `ui-drop-right-*`
//                  `ui-drop-stack`
//                  `ui-drop-grid`
//
// States:          `ui-open`
//
// Uses:            Animation
//
// ========================================================================


// Variables
// ========================================================================

@drop-z-index:                              @global-z-index + 20;
@drop-width:                                300px;
@drop-margin:                               @global-margin;


/* ========================================================================
   Component: Drop
 ========================================================================== */

/*
 * 1. Hide by default
 * 2. Set position
 * 3. Set a default width
 */

.ui-drop {
    /* 1 */
    display: none;
    /* 2 */
    position: absolute;
    z-index: @drop-z-index;
    /* 3 */
    box-sizing: border-box;
    width: @drop-width;
}

/* Show */
.ui-drop.ui-open { display: block; }


/* Direction / Alignment modifiers
 ========================================================================== */

/* Direction */
[class*='ui-drop-top'] { margin-top: -@drop-margin; }
[class*='ui-drop-bottom'] { margin-top: @drop-margin; }
[class*='ui-drop-left'] { margin-left: -@drop-margin; }
[class*='ui-drop-right'] { margin-left: @drop-margin; }


/* Grid modifiers
 ========================================================================== */

.ui-drop-stack .ui-drop-grid > * { width: 100% !important; }


// Hooks
// ========================================================================

.hook-drop-misc;

.hook-drop-misc() {}