//
// Navs
// --------------------------------------------------

// NAV LIST
// --------
.nav-list {
  background-color: @grayLighter;
  border: 1px solid @navlistBorder;
  border-bottom: 1px solid @navlistBorderBottom;
  border-bottom-width: 2px;
  border-top-width: 0;
  .border-radius(@borderRadiusSmall);
}

.nav-list > li {
  background-color: @white;
}


.nav-list > li > a,
.nav-list .nav-header {
   padding: 9px 18px;
   margin-top: 1px;
   border-left: 2px solid transparent;
   .transition(border .218s);
   background-color: @white;
   font-size: 14px;
   line-height: 1.4;
   color: @navbarLinkColor;
   text-shadow: none;
   text-overflow: ellipsis;
   overflow: hidden;
}

.nav-list .nav-header {
   color: @linkColor;
}

.nav li + .nav-header {
  margin-top: 1px;
}

.nav-list > li > a:hover, .nav-list > li > a:focus,
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
  border-color: @navbarBorder;
  color: @navbarLinkColorHover;
  text-shadow: none;
  background-color: @grayLighter;
}


/* just ignore divider, default nav-list has always dividers between items */
.nav-list .divider {
  display: none;
}



.nav-tabs .dropdown-toggle .caret,
.navbar .nav li.dropdown > .dropdown-toggle .caret {
   margin-top: 0;
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
   color: @graySemiLight;
}



// TABS
// ----
.nav-tabs > li > a {
  .border-radius(2px 2px 0 0);
}

// Active state, and it's :hover/:focus to override normal :hover/:focus
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
  color: @navbarLinkColorHover;
  background-color: @white;
}


// PILLS
// -----
.nav-pills > li > a {
  border-bottom: 2px solid transparent;
  color: @navbarLinkColor;
  white-space: nowrap;
  .border-radius(0);
  background-color: transparent;
}

// Active state
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
  border-color: @navbarBorder;
  color: @navbarLinkColorHover;
  font-weight: bold;
  text-decoration: none;
  .box-shadow(none);
  .transition(border-color 0.218s ease 0s);
  background-color: transparent;
}


.nav.nav-pills > li > a:hover, .nav.nav-pills > li > a:focus {
  background-color: transparent;
  border-color: @navbarBorder;
}

.nav.nav-pills > .disabled > a {
  border-color: transparent;
}


// STACKED NAV
// -----------

.nav-pills.nav-stacked > .active > a, 
.nav-pills.nav-stacked > .active > a:hover, 
.nav-pills.nav-stacked > .active > a:focus {
  border-color: transparent;
  background-color: @navbarBorder;
  color: @navbarLinkColorActive;
}

.nav-pills.nav-stacked > li > a:hover, .nav-pills.nav-stacked > li > a:focus {
  background-color: @grayLighter;
  border-color: transparent;
}


// DROPDOWNS
// ---------
.nav-tabs .dropdown-menu {
  .border-radius(0 0 3px 3px); // remove the top rounded corners here since there is a hard edge above the menu
}
.nav-pills .dropdown-menu {
  .border-radius(3px); // make rounded corners match the pills
}

// Open dropdowns
// -------------------------
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover,
.nav > li.dropdown.open.active > a:focus {
  color: @navbarText;
  background-color: transparent;
  border-color: transparent;
}


.nav .dropdown-toggle .caret  {
  margin-top: 0;
}




// TABBABLE
// --------
.tabs-below > .nav-tabs > li > a {
  .border-radius(0 0 2px 2px);
}
.tabs-left > .nav-tabs > li > a {
  .border-radius(2px 0 0 2px);
}
.tabs-right > .nav-tabs > li > a {
  .border-radius(0 2px 2px 0);
}