// Name:            Navbar
// Description:     Component to create horizontal navigation bars
//
// Component:       `ui-navbar`
//
// Sub-objects:     `ui-navbar-container`
//                  `ui-navbar-left`
//                  `ui-navbar-right`
//                  `ui-navbar-center`
//                  `ui-navbar-center-left`
//                  `ui-navbar-center-right`
//                  `ui-navbar-nav`
//                  `ui-navbar-item`
//                  `ui-navbar-toggle`
//                  `ui-navbar-subtitle`
//                  `ui-navbar-dropbar`
//
// Adopted:         `ui-navbar-dropdown` + Modifiers
//                  `ui-navbar-dropdown-nav`
//                  `ui-navbar-dropdown-grid`
//                  `ui-navbar-toggle-icon`
//
// Modifiers:       `ui-navbar-transparent`
//                  `ui-navbar-sticky`
//                  `ui-navbar-dropdown-stack`
//
// States:          `ui-active`
//                  `ui-parent`
//                  `ui-open`
//
//
// ========================================================================


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

@navbar-background:                             @global-muted-background;
@navbar-color-mode:                             none;

@navbar-nav-item-height:                        80px;
@navbar-nav-item-padding-horizontal:            15px;
@navbar-nav-item-color:                         @global-muted-color;
@navbar-nav-item-font-size:                     @global-font-size;
@navbar-nav-item-font-family:                   @global-font-family;
@navbar-nav-item-hover-color:                   @global-color;
@navbar-nav-item-onclick-color:                 @global-emphasis-color;
@navbar-nav-item-active-color:                  @global-emphasis-color;

@navbar-item-color:                             @global-color;

@navbar-toggle-color:                           @global-muted-color;
@navbar-toggle-hover-color:                     @global-color;

@navbar-subtitle-font-size:                     @global-small-font-size;

@navbar-dropdown-z-index:                       @global-z-index + 20;
@navbar-dropdown-width:                         200px;
@navbar-dropdown-margin:                        0;
@navbar-dropdown-padding:                       15px;
@navbar-dropdown-background:                    @global-muted-background;
@navbar-dropdown-color:                         @global-color;
@navbar-dropdown-grid-gutter-horizontal:        @global-gutter;
@navbar-dropdown-grid-gutter-vertical:          @navbar-dropdown-grid-gutter-horizontal;

@navbar-dropdown-dropbar-margin-top:            0;
@navbar-dropdown-dropbar-margin-bottom:         @navbar-dropdown-dropbar-margin-top;

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

@navbar-dropbar-background:                     @navbar-dropdown-background;
@navbar-dropbar-z-index:                        @global-z-index - 20;


/* ========================================================================
   Component: Navbar
 ========================================================================== */

/*
 * 1. Create position context to center navbar group
 */

.ui-navbar {
  display: flex;
  /* 1 */
  position: relative;
  .hook-navbar;
}


/* Container
 ========================================================================== */

.ui-navbar-container:not(.ui-navbar-transparent) {
  background: @navbar-background;
  .hook-navbar-container;
}

// Color Mode
.ui-navbar-container:not(.ui-navbar-transparent):extend(.ui-light all) when (@navbar-color-mode = light) {}
.ui-navbar-container:not(.ui-navbar-transparent):extend(.ui-dark all) when (@navbar-color-mode = dark) {}

/*
 * Remove pseudo elements created by micro clearfix as precaution (if Container component is used)
 */

.ui-navbar-container > ::before,
.ui-navbar-container > ::after { display: none !important; }


/* Groups
 ========================================================================== */

/*
 * 1. Align navs and items vertically if they have a different height
 * 2. Note: IE 11 requires an extra `div` which affects the center selector
 */

.ui-navbar-left,
.ui-navbar-right,
  // 2. [class*='ui-navbar-center'],
.ui-navbar-center,
.ui-navbar-center-left > *,
.ui-navbar-center-right > * {
  display: flex;
  /* 1 */
  align-items: center;
}

/*
 * Horizontal alignment
 * 1. Create position context for centered navbar with sub groups (left/right)
 * 2. Needed for dropdowns because a new position context is created
 *    `z-index` must be smaller than off-canvas
 * 3. Fix text wrapping if the centered section is larger than 50% of the navbar
 * 4. Align sub groups for centered navbar
 */

.ui-navbar-right { margin-left: auto; }

.ui-navbar-center:only-child {
  margin-left: auto;
  margin-right: auto;
  /* 1 */
  position: relative;
}

.ui-navbar-center:not(:only-child) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  /* 2 */
  z-index: @global-z-index - 10;
}

/* 3 */
.ui-navbar-center:not(:only-child) .ui-navbar-nav > li > a,
.ui-navbar-center:not(:only-child) .ui-navbar-item,
.ui-navbar-center:not(:only-child) .ui-navbar-toggle { white-space: nowrap; }

/* 4 */
.ui-navbar-center-left,
.ui-navbar-center-right {
  position: absolute;
  top: 0;
}

.ui-navbar-center-left { right: 100%; }
.ui-navbar-center-right { left: 100%; }

[class*='ui-navbar-center-'] .ui-navbar-nav > li > a,
[class*='ui-navbar-center-'] .ui-navbar-item,
[class*='ui-navbar-center-'] .ui-navbar-toggle { white-space: nowrap; }


/* Nav
 ========================================================================== */

/*
 * 1. Reset list
 */

.ui-navbar-nav {
  display: flex;
  /* 1 */
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Allow items to wrap into the next line
 * Only not `absolute` positioned groups
 */

.ui-navbar-left,
.ui-navbar-right,
.ui-navbar-center:only-child { flex-wrap: wrap; }

/*
 * Items
 * 1. Center content vertically and horizontally
 * 2. Dimensions
 * 3. Style
 * 4. Required for `a`
 */

.ui-navbar-nav > li > a,    // Nav item
.ui-navbar-item,            // Content item
.ui-navbar-toggle {         // Clickable item
  /* 1 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 2 */
  box-sizing: border-box;
  min-height: @navbar-nav-item-height;
  padding: 0 @navbar-nav-item-padding-horizontal;
  /* 3 */
  font-size: @navbar-nav-item-font-size;
  font-family: @navbar-nav-item-font-family;
  /* 4 */
  text-decoration: none;
}

/*
 * Nav items
 */

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

/*
 * Hover
 * Apply hover style also to focus state and if dropdown is opened
 */

.ui-navbar-nav > li:hover > a,
.ui-navbar-nav > li > a:focus,
.ui-navbar-nav > li > a.ui-open {
  color: @navbar-nav-item-hover-color;
  outline: none;
  .hook-navbar-nav-item-hover;
}

/* OnClick */
.ui-navbar-nav > li > a:active {
  color: @navbar-nav-item-onclick-color;
  .hook-navbar-nav-item-onclick;
}

/* Active */
.ui-navbar-nav > li.ui-active > a {
  color: @navbar-nav-item-active-color;
  .hook-navbar-nav-item-active;
}


/* Item
 ========================================================================== */

.ui-navbar-item {
  color: @navbar-item-color;
  .hook-navbar-item;
}


/* Toggle
 ========================================================================== */

.ui-navbar-toggle {
  color: @navbar-toggle-color;
  .hook-navbar-toggle;
}

.ui-navbar-toggle:hover,
.ui-navbar-toggle:focus,
.ui-navbar-toggle.ui-open {
  color: @navbar-toggle-hover-color;
  outline: none;
  text-decoration: none;
  .hook-navbar-toggle-hover;
}

/*
 * Icon
 * Adopts `ui-icon`
 */

.ui-navbar-toggle-icon {
  .hook-navbar-toggle-icon;
}

/* Hover + Focus */
:hover > .ui-navbar-toggle-icon,
:focus > .ui-navbar-toggle-icon {
  .hook-navbar-toggle-icon-hover;
}


/* Subtitle
 ========================================================================== */

.ui-navbar-subtitle {
  font-size: @navbar-subtitle-font-size;
  .hook-navbar-subtitle;
}


/* Style modifiers
 ========================================================================== */

.ui-navbar-transparent {
  .hook-navbar-transparent;
}

.ui-navbar-sticky {
  .hook-navbar-sticky;
}


/* Dropdown
 ========================================================================== */

/*
 * Adopts `ui-dropdown`
 * 1. Hide by default
 * 2. Set position
 * 3. Set a default width
 * 4. Style
 */

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

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

/*
 * Direction / Alignment modifiers
 */

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

/*
 * Grid
 * Adopts `ui-grid`
 */

/* Gutter Horizontal */
.ui-navbar-dropdown-grid { margin-left: -@navbar-dropdown-grid-gutter-horizontal; }
.ui-navbar-dropdown-grid > * { padding-left: @navbar-dropdown-grid-gutter-horizontal; }

/* Gutter Vertical */
.ui-navbar-dropdown-grid > .ui-grid-margin { margin-top: @navbar-dropdown-grid-gutter-vertical; }

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

/*
 * Width modifier
 */

.ui-navbar-dropdown-width-2:not(.ui-navbar-dropdown-stack) { width: (@navbar-dropdown-width * 2); }
.ui-navbar-dropdown-width-3:not(.ui-navbar-dropdown-stack) { width: (@navbar-dropdown-width * 3); }
.ui-navbar-dropdown-width-4:not(.ui-navbar-dropdown-stack) { width: (@navbar-dropdown-width * 4); }
.ui-navbar-dropdown-width-5:not(.ui-navbar-dropdown-stack) { width: (@navbar-dropdown-width * 5); }

/*
 * Dropbar modifier
 */

.ui-navbar-dropdown-dropbar {
  margin-top: @navbar-dropdown-dropbar-margin-top;
  margin-bottom: @navbar-dropdown-dropbar-margin-bottom;
  .hook-navbar-dropdown-dropbar;
}


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

.ui-navbar-dropdown-nav {
  .hook-navbar-dropdown-nav;
}

/*
 * Items
 */

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

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

/* Active */
.ui-navbar-dropdown-nav > li.ui-active > a {
  color: @navbar-dropdown-nav-item-active-color;
  .hook-navbar-dropdown-nav-item-active;
}

/*
 * Header
 */

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

/*
 * Divider
 */

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

/*
 * Sublists
 */

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

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

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


/* Dropbar
 ========================================================================== */

.ui-navbar-dropbar {
  background: @navbar-dropbar-background;
  .hook-navbar-dropbar;
}

/*
 * Slide modifier
 */

.ui-navbar-dropbar-slide {
  position: absolute;
  z-index: @navbar-dropbar-z-index;
  left: 0;
  right: 0;
  .hook-navbar-dropbar-slide;
}


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

.hook-navbar-misc;

.hook-navbar() {}
.hook-navbar-container() {}
.hook-navbar-nav-item() {}
.hook-navbar-nav-item-hover() {}
.hook-navbar-nav-item-onclick() {}
.hook-navbar-nav-item-active() {}
.hook-navbar-item() {}
.hook-navbar-toggle(){}
.hook-navbar-toggle-hover(){}
.hook-navbar-toggle-icon(){}
.hook-navbar-toggle-icon-hover(){}
.hook-navbar-subtitle() {}
.hook-navbar-transparent(){}
.hook-navbar-sticky(){}
.hook-navbar-dropdown(){}
.hook-navbar-dropdown-dropbar(){}
.hook-navbar-dropdown-nav(){}
.hook-navbar-dropdown-nav-item() {}
.hook-navbar-dropdown-nav-item-hover() {}
.hook-navbar-dropdown-nav-item-active() {}
.hook-navbar-dropdown-nav-header() {}
.hook-navbar-dropdown-nav-divider() {}
.hook-navbar-dropbar(){}
.hook-navbar-dropbar-slide(){}
.hook-navbar-misc() {}


// Inverse
// ========================================================================

@inverse-navbar-nav-item-color:                @inverse-global-muted-color;
@inverse-navbar-nav-item-hover-color:          @inverse-global-color;
@inverse-navbar-nav-item-onclick-color:        @inverse-global-emphasis-color;
@inverse-navbar-nav-item-active-color:         @inverse-global-emphasis-color;
@inverse-navbar-item-color:                    @inverse-global-color;
@inverse-navbar-toggle-color:                  @inverse-global-muted-color;
@inverse-navbar-toggle-hover-color:            @inverse-global-color;

.hook-inverse() {

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

  .ui-navbar-nav > li:hover > a,
  .ui-navbar-nav > li > a:focus,
  .ui-navbar-nav > li > a.ui-open {
    color: @inverse-navbar-nav-item-hover-color;
    .hook-inverse-navbar-nav-item-hover;
  }

  .ui-navbar-nav > li > a:active {
    color: @inverse-navbar-nav-item-onclick-color;
    .hook-inverse-navbar-nav-item-onclick;
  }

  .ui-navbar-nav > li.ui-active > a {
    color: @inverse-navbar-nav-item-active-color;
    .hook-inverse-navbar-nav-item-active;
  }

  .ui-navbar-item {
    color: @inverse-navbar-item-color;
    .hook-inverse-navbar-item;
  }

  .ui-navbar-toggle {
    color: @inverse-navbar-toggle-color;
    .hook-inverse-navbar-toggle;
  }

  .ui-navbar-toggle:hover,
  .ui-navbar-toggle:focus,
  .ui-navbar-toggle.ui-open {
    color: @inverse-navbar-toggle-hover-color;
    .hook-inverse-navbar-toggle-hover;
  }

}

.hook-inverse-navbar-nav-item() {}
.hook-inverse-navbar-nav-item-hover() {}
.hook-inverse-navbar-nav-item-onclick() {}
.hook-inverse-navbar-nav-item-active() {}
.hook-inverse-navbar-item() {}
.hook-inverse-navbar-toggle() {}
.hook-inverse-navbar-toggle-hover() {}