// NAVBAR (FIXED AND STATIC)
// -------------------------

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

.navbar
  overflow: visible
  margin-bottom: $baseLineHeight

// Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
.navbar-inner
  padding-left: 20px
  padding-right: 20px
  +gradient-vertical($navbarBackgroundHighlight, $navbarBackground)
  +border-radius(4px)
  $shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)
  +box-shadow($shadow)

// Navbar button for toggling navbar items in responsive layouts
.btn-navbar
  display: none
  float: right
  padding: 7px 10px
  margin-left: 5px
  margin-right: 5px
  +buttonBackground($navbarBackgroundHighlight, $navbarBackground)
  $shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075)
  +box-shadow($shadow)

.btn-navbar .icon-bar
  display: block
  width: 18px
  height: 2px
  background-color: #f5f5f5
  +border-radius(1px)
  +box-shadow(0 1px 0 rgba(0, 0, 0, 0.25))

.btn-navbar .icon-bar + .icon-bar
  margin-top: 3px

// Override the default collapsed state
.nav-collapse.collapse
  height: auto

// Brand, links, text, and buttons
.navbar
  // Hover and active states
  .brand:hover
    text-decoration: none
  // Website or project name
  .brand
    float: left
    display: block
    padding: 8px 20px 12px
    margin-left: -20px
    // negative indent to left-align the text down the page
    font-size: 20px
    font-weight: 200
    line-height: 1
    color: $white
  // Plain text in topbar
  .navbar-text
    margin-bottom: 0
    line-height: 40px
    color: $navbarText
    a:hover
      color: $white
      background-color: transparent
  // Buttons in navbar
  .btn,
  .btn-group
    margin-top: 5px
    // make buttons vertically centered in navbar
  .btn-group .btn
    margin-top: 0
    // then undo the margin here so we don't accidentally double it

// Navbar forms
.navbar-form
  margin-bottom: 0
  // remove default bottom margin
  +clearfix
  input,
  select
    display: inline-block
    margin-top: 5px
    margin-bottom: 0
  .radio,
  .checkbox
    margin-top: 5px
  input[type="image"],
  input[type="checkbox"],
  input[type="radio"]
    margin-top: 3px
  .input-append,
  .input-prepend
    margin-top: 6px
    white-space: nowrap
    // preven two  items from separating within a .navbar-form that has .pull-left
    input
      margin-top: 0
      // remove the margin on top since it's on the parent

// Navbar search
.navbar-search
  position: relative
  float: left
  margin-top: 6px
  margin-bottom: 0
  .search-query
    padding: 4px 9px
    +font-sans-serif(13px, normal, 1)
    color: $white
    color: rgba(255, 255, 255, 0.75)
    background: #666
    background: rgba(255, 255, 255, 0.3)
    border: 1px solid #111
    $shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15)
    +box-shadow($shadow)
    +transition(none)
    // Placeholder text gets special styles; can't be bundled together though for some reason
    +placeholder($grayLighter)
    // Hover states
    &:hover
      color: $white
      background-color: $grayLight
      background-color: rgba(255, 255, 255, 0.5)
    // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
    &:focus,
    &.focused
      padding: 5px 10px
      color: $grayDark
      text-shadow: 0 1px 0 $white
      background-color: $white
      border: 0
      +box-shadow(0 0 3px rgba(0, 0, 0, 0.15))
      outline: 0

// FIXED NAVBAR
// ------------

.navbar-fixed-top
  position: fixed
  top: 0
  right: 0
  left: 0
  z-index: $zindexFixedNavbar

.navbar-fixed-top .navbar-inner
  padding-left: 0
  padding-right: 0
  +border-radius(0)

// NAVIGATION
// ----------

.navbar .nav
  position: relative
  left: 0
  display: block
  float: left
  margin: 0 10px 0 0

.navbar .nav.pull-right
  float: right
  // redeclare due to specificity

.navbar .nav > li
  display: block
  float: left

// Links
.navbar .nav > li > a
  float: none
  padding: 10px 10px 11px
  line-height: 19px
  color: $navbarLinkColor
  text-decoration: none
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)

// Hover
.navbar .nav > li > a:hover
  background-color: $navbarLinkBackgroundHover
  // "transparent" is default to differentiate :hover from .active
  color: $navbarLinkColorHover
  text-decoration: none

// Active nav items

.navbar .nav .active > a,
.navbar .nav .active > a:hover
  color: $navbarLinkColorHover
  text-decoration: none
  background-color: $navbarBackground
  background-color: rgba(0, 0, 0, 0.5)

// Dividers (basically a vertical hr)
.navbar .divider-vertical
  height: $navbarHeight
  width: 1px
  margin: 0 9px
  overflow: hidden
  background-color: $navbarBackground
  border-right: 1px solid $navbarBackgroundHighlight

// Secondary (floated right) nav in topbar
.navbar .nav.pull-right
  margin-left: 10px
  margin-right: 0

// Dropdown menus
// --------------

// Menu position and menu carets
.navbar .dropdown-menu
  margin-top: 1px
  +border-radius(4px)
  &:before
    content: ''
    display: inline-block
    border-left: 7px solid transparent
    border-right: 7px solid transparent
    border-bottom: 7px solid #ccc
    border-bottom-color: rgba(0, 0, 0, 0.2)
    position: absolute
    top: -7px
    left: 9px
  &:after
    content: ''
    display: inline-block
    border-left: 6px solid transparent
    border-right: 6px solid transparent
    border-bottom: 6px solid $white
    position: absolute
    top: -6px
    left: 10px

// Dropdown toggle caret

.navbar .nav .dropdown-toggle .caret,
.navbar .nav .open.dropdown .caret
  border-top-color: $white

.navbar .nav .active .caret
  +opacity(100)

// Remove background color from open dropdown

.navbar .nav .open > .dropdown-toggle,
.navbar .nav .active > .dropdown-toggle,
.navbar .nav .open.active > .dropdown-toggle
  background-color: transparent

// Dropdown link on hover
.navbar .nav .active > .dropdown-toggle:hover
  color: $white

// Right aligned menus need alt position
.navbar .nav.pull-right .dropdown-menu
  left: auto
  right: 0
  &:before
    left: auto
    right: 12px
  &:after
    left: auto
    right: 13px