// Name:            Dropdown
// Description:     Defines styles for a toggleable dropdown
//
// Component:       `uk-dropdown`
//
// Sub-objects:     `uk-dropdown-overlay`
//
// Modifiers:       `uk-dropdown-blank`
//                  `uk-dropdown-top`
//                  `uk-dropdown-bottom`
//                  `uk-dropdown-left`
//                  `uk-dropdown-right`
//                  `uk-dropdown-justify`
//                  `uk-dropdown-grid`
//                  `uk-dropdown-width-2`
//                  `uk-dropdown-width-3`
//                  `uk-dropdown-width-4`
//                  `uk-dropdown-width-5`
//                  `uk-dropdown-stack`
//                  `uk-dropdown-small`
//                  `uk-dropdown-navbar`
//                  `uk-dropdown-scrollable`
//
// States:          `uk-open`
//
// Uses:            Animation
//                  Grid: `uk-width-*`
//                  Nav: `uk-nav`
//
// ========================================================================


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

@dropdown-padding-vertical:                     0.5em;
@dropdown-z-index:                              @global-z-index + 40;
@dropdown-width:                                200px;
@dropdown-background:                           @global-background;
@dropdown-dark-background:                      #333e49;
@dropdown-color:                                @global-color;
@dropdown-dark-color:                           @global-dark-color;
@dropdown-font-size:                            1rem;

@dropdown-divider-border-width:                 1px;
@dropdown-divider-border:                       @global-border;

@dropdown-scrollable-height:                    200px;
@dropdown-box-shadow:                           @global-box-shadow;


/* ========================================================================
   Component: Dropdown
 ========================================================================== */

/*
 * 1. Hide by default
 * 2. Set position
 * 3. Box-sizing is needed for `uk-dropdown-justify`
 * 4. Set width
 */

.uk-dropdown,
.uk-dropdown-blank {
    /* 1 */
    display: none;
    /* 2 */
    position: absolute;
    z-index: @dropdown-z-index;
    /* 3 */
    box-sizing: border-box;
    /* 4 */
    width: @dropdown-width;
}

/*
 * Dropdown style
 * 1. Reset button group whitespace hack
 */

.uk-dropdown {
    padding: @dropdown-padding-vertical 0;
    background: @dropdown-background;
    color: @dropdown-color;
    /* 1 */
    font-size: @dropdown-font-size;
    vertical-align: top;

    box-shadow: @dropdown-box-shadow;

    .dark & {
        background: @dropdown-dark-background;
        color: @dropdown-dark-color;
    }
}

/*
 * 1. Show dropdown
 */

.uk-open > .uk-dropdown,
.uk-open > .uk-dropdown-blank {
    /* 1 */
    display: block;
}

/* Modifier `uk-dropdown-small`
 ========================================================================== */

/*
 * Set min-width and text expands dropdown if needed
 */

.uk-dropdown-small {
    min-width: 150px;
    width: auto;
    white-space: nowrap;
}


/* Modifier `uk-dropdown-scrollable`
 ========================================================================== */

/*
 * Usefull for long lists
 */

.uk-dropdown-scrollable {
    overflow-y: auto;
    max-height: @dropdown-scrollable-height;
}


/* Sub-object: `uk-dropdown-overlay`
 ========================================================================== */

.uk-dropdown-overlay {
    .hook-dropdown-overlay;
}



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

.hook-dropdown-navbar() {}
.hook-dropdown-overlay() {}