// Name:            Dropdown
// Description:     Component to create dropdown menus
//
// Component:       `ui-dropdown`
//
// Adopted:         `ui-dropdown-nav`
//
// Modifiers:       `ui-dropdown-top-*`
//                  `ui-dropdown-bottom-*`
//                  `ui-dropdown-left-*`
//                  `ui-dropdown-right-*`
//                  `ui-dropdown-stack`
//                  `ui-dropdown-grid`
//
// States:          `ui-active`
//
// ========================================================================


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

@dropdown-z-index:                              @global-z-index + 20;
@dropdown-min-width:                            200px;
@dropdown-padding:                              15px;
@dropdown-background:                           @global-muted-background;
@dropdown-color:                                @global-color;
@dropdown-margin:                               @global-small-margin;

@dropdown-nav-item-color:                       @global-muted-color;
@dropdown-nav-item-hover-color:                 @global-color;
@dropdown-nav-header-color:                     @global-emphasis-color;
@dropdown-nav-divider-border-width:             @global-border-width;
@dropdown-nav-divider-border:                   @global-border;
@dropdown-nav-sublist-item-color:               @global-muted-color;
@dropdown-nav-sublist-item-hover-color:         @global-color;


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

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

.ui-dropdown {
  /* 1 */
  display: none;
  /* 2 */
  position: absolute;
  z-index: @dropdown-z-index;
  /* 3 */
  box-sizing: border-box;
  min-width: @dropdown-min-width;
  /* 4 */
  padding: @dropdown-padding;
  background: @dropdown-background;
  color: @dropdown-color;
  .hook-dropdown;
}

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


/* Nav
 * Adopts `ui-nav`
 ========================================================================== */

.ui-dropdown-nav {
  white-space: nowrap;
  .hook-dropdown-nav;
}

/*
 * Items
 */

.ui-dropdown-nav > li > a {
  color: @dropdown-nav-item-color;
  .hook-dropdown-nav-item;
}

/* Hover + Focus + Active */
.ui-dropdown-nav > li > a:hover,
.ui-dropdown-nav > li > a:focus,
.ui-dropdown-nav > li.ui-active > a {
  color: @dropdown-nav-item-hover-color;
  .hook-dropdown-nav-item-hover;
}

/*
 * Header
 */

.ui-dropdown-nav .ui-nav-header {
  color: @dropdown-nav-header-color;
  .hook-dropdown-nav-header;
}

/*
 * Divider
 */

.ui-dropdown-nav .ui-nav-divider {
  border-top: @dropdown-nav-divider-border-width solid @dropdown-nav-divider-border;
  .hook-dropdown-nav-divider;
}

/*
 * Sublists
 */

.ui-dropdown-nav .ui-nav-sub a { color: @dropdown-nav-sublist-item-color; }

.ui-dropdown-nav .ui-nav-sub a:hover,
.ui-dropdown-nav .ui-nav-sub a:focus,
.ui-dropdown-nav .ui-nav-sub li.ui-active > a { color: @dropdown-nav-sublist-item-hover-color; }


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

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


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

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



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

.hook-dropdown-misc;

.hook-dropdown() {}
.hook-dropdown-nav() {}
.hook-dropdown-nav-item() {}
.hook-dropdown-nav-item-hover() {}
.hook-dropdown-nav-header() {}
.hook-dropdown-nav-divider() {}
.hook-dropdown-misc() {}