// NAVIGATIONS
// -----------

// BASE CLASS
// ----------

.nav
  margin-left: 0
  margin-bottom: $baseLineHeight
  list-style: none

// Make links block level
.nav > li > a
  display: block

.nav > li > a:hover
  text-decoration: none
  background-color: $grayLighter

// Nav headers (for dropdowns and lists)
.nav .nav-header
  display: block
  padding: 3px 15px
  font-size: 11px
  font-weight: bold
  line-height: $baseLineHeight
  color: $grayLight
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
  text-transform: uppercase

// Space them out when they follow another list item (link)
.nav li + .nav-header
  margin-top: 9px

// NAV LIST
// --------

.nav-list
  padding-left: 14px
  padding-right: 14px
  margin-bottom: 0

.nav-list > li > a,
.nav-list .nav-header
  margin-left: -15px
  margin-right: -15px
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)

.nav-list > li > a
  padding: 3px 15px

.nav-list .active > a,
.nav-list .active > a:hover
  color: $white
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2)
  background-color: $linkColor

.nav-list [class^="icon-"]
  margin-right: 2px

// TABS AND PILLS
// -------------

// Common styles

.nav-tabs,
.nav-pills
  +clearfix

.nav-tabs > li,
.nav-pills > li
  float: left

.nav-tabs > li > a,
.nav-pills > li > a
  padding-right: 12px
  padding-left: 12px
  margin-right: 2px
  line-height: 14px
  // keeps the overall height an even number

// TABS
// ----

// Give the tabs something to sit on
.nav-tabs
  border-bottom: 1px solid #ddd

// Make the list-items overlay the bottom border
.nav-tabs > li
  margin-bottom: -1px

// Actual tabs (as links)
.nav-tabs > li > a
  padding-top: 9px
  padding-bottom: 9px
  border: 1px solid transparent
  +border-radius(4px 4px 0 0)
  &:hover
    border-color: $grayLighter $grayLighter #dddddd

// Active state, and it's :hover to override normal :hover

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover
  color: $gray
  background-color: $white
  border: 1px solid #ddd
  border-bottom-color: transparent
  cursor: default

// PILLS
// -----

// Links rendered as pills
.nav-pills > li > a
  padding-top: 8px
  padding-bottom: 8px
  margin-top: 2px
  margin-bottom: 2px
  +border-radius(5px)

// Active state

.nav-pills .active > a,
.nav-pills .active > a:hover
  color: $white
  background-color: $linkColor

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

// Stacked tabs and pills
.nav-stacked > li
  float: none

.nav-stacked > li > a
  margin-right: 0
  // no need for the gap between nav items

// Tabs
.nav-tabs.nav-stacked
  border-bottom: 0

.nav-tabs.nav-stacked > li > a
  border: 1px solid #ddd
  +border-radius(0)

.nav-tabs.nav-stacked > li:first-child > a
  +border-radius(4px 4px 0 0)

.nav-tabs.nav-stacked > li:last-child > a
  +border-radius(0 0 4px 4px)

.nav-tabs.nav-stacked > li > a:hover
  border-color: #ddd
  z-index: 2

// Pills
.nav-pills.nav-stacked > li > a
  margin-bottom: 3px

.nav-pills.nav-stacked > li:last-child > a
  margin-bottom: 1px
  // decrease margin to match sizing of stacked tabs

// DROPDOWNS
// ---------

// Position the menu

.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu
  margin-top: 1px
  border-width: 1px

.nav-pills .dropdown-menu
  +border-radius(4px)

// Default dropdown links
// -------------------------
// Make carets use linkColor to start

.nav-tabs .dropdown-toggle .caret,
.nav-pills .dropdown-toggle .caret
  border-top-color: $linkColor
  margin-top: 6px

.nav-tabs .dropdown-toggle:hover .caret,
.nav-pills .dropdown-toggle:hover .caret
  border-top-color: $linkColorHover

// Active dropdown links
// -------------------------

.nav-tabs .active .dropdown-toggle .caret,
.nav-pills .active .dropdown-toggle .caret
  border-top-color: $grayDark

// Active:hover dropdown links
// -------------------------
.nav > .dropdown.active > a:hover
  color: $black
  cursor: pointer

// Open dropdowns
// -------------------------

.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > .open.active > a:hover
  color: $white
  background-color: $grayLight
  border-color: $grayLight

.nav .open .caret,
.nav .open.active .caret,
.nav .open a:hover .caret
  border-top-color: $white
  +opacity(1)

// Dropdowns in stacked tabs
.tabs-stacked .open > a:hover
  border-color: $grayLight

// TABBABLE
// --------

// COMMON STYLES
// -------------

// Clear any floats
.tabbable
  +clearfix

.tab-content
  overflow: hidden
  // prevent content from running below tabs

// Remove border on bottom, left, right

.tabs-below .nav-tabs,
.tabs-right .nav-tabs,
.tabs-left .nav-tabs
  border-bottom: 0

// Show/hide tabbable areas

.tab-content > .tab-pane,
.pill-content > .pill-pane
  display: none

.tab-content > .active,
.pill-content > .active
  display: block

// BOTTOM
// ------

.tabs-below .nav-tabs
  border-top: 1px solid #ddd

.tabs-below .nav-tabs > li
  margin-top: -1px
  margin-bottom: 0

.tabs-below .nav-tabs > li > a
  +border-radius(0 0 4px 4px)
  &:hover
    border-bottom-color: transparent
    border-top-color: #ddd

.tabs-below .nav-tabs .active > a,
.tabs-below .nav-tabs .active > a:hover
  border-color: transparent #ddd #ddd #ddd

// LEFT & RIGHT
// ------------

// Common styles

.tabs-left .nav-tabs > li,
.tabs-right .nav-tabs > li
  float: none

.tabs-left .nav-tabs > li > a,
.tabs-right .nav-tabs > li > a
  min-width: 74px
  margin-right: 0
  margin-bottom: 3px

// Tabs on the left
.tabs-left .nav-tabs
  float: left
  margin-right: 19px
  border-right: 1px solid #ddd

.tabs-left .nav-tabs > li > a
  margin-right: -1px
  +border-radius(4px 0 0 4px)

.tabs-left .nav-tabs > li > a:hover
  border-color: $grayLighter #dddddd $grayLighter $grayLighter

.tabs-left .nav-tabs .active > a,
.tabs-left .nav-tabs .active > a:hover
  border-color: #ddd transparent #ddd #ddd
  *border-right-color: $white

// Tabs on the right
.tabs-right .nav-tabs
  float: right
  margin-left: 19px
  border-left: 1px solid #ddd

.tabs-right .nav-tabs > li > a
  margin-left: -1px
  +border-radius(0 4px 4px 0)

.tabs-right .nav-tabs > li > a:hover
  border-color: $grayLighter $grayLighter $grayLighter #dddddd

.tabs-right .nav-tabs .active > a,
.tabs-right .nav-tabs .active > a:hover
  border-color: #ddd #ddd #ddd transparent
  *border-left-color: $white