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

// Dropdown arrow/caret
.caret
  display: inline-block
  width: 0
  height: 0
  margin-left: 2px
  vertical-align: middle
  border-top: $caret-width-base solid $dropdown-caret-color
  border-right: $caret-width-base solid transparent
  border-left: $caret-width-base solid transparent
  // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
  // we can just straight up remove this.
  border-bottom: 0 dotted
  content: ""

// The dropdown wrapper (div)
.dropdown
  position: relative

// Prevent the focus on the dropdown toggle when closing dropdowns
.dropdown-toggle:focus
  outline: 0

// The dropdown menu (ul)
.dropdown-menu
  position: absolute
  top: 100%
  left: 0
  z-index: $zindex-dropdown
  display: none
  // none by default, but block on "open" of the menu
  float: left
  min-width: 160px
  padding: 5px 0
  margin: 2px 0 0
  // override default ul
  list-style: none
  font-size: $font-size-base
  background-color: $dropdown-bg
  border: 1px solid $dropdown-fallback-border
  // IE8 fallback
  border: 1px solid $dropdown-border
  border-radius: $border-radius-base
  +box-shadow(0 6px 12px rgba(0, 0, 0, 0.175))
  background-clip: padding-box
  // Aligns the dropdown menu to right
  &.pull-right
    right: 0
    left: auto
  // Dividers (basically an hr) within the dropdown
  .divider
    +nav-divider($dropdown-divider-bg)
  // Links within the dropdown menu
  > li > a
    display: block
    padding: 3px 20px
    clear: both
    font-weight: normal
    line-height: $line-height-base
    color: $dropdown-link-color
    white-space: nowrap
    // prevent links from randomly breaking onto new lines

// Hover/Focus state
.dropdown-menu > li > a
  &:hover,
  &:focus
    text-decoration: none
    color: $dropdown-link-hover-color
    background-color: $dropdown-link-hover-bg

// Active state
.dropdown-menu > .active > a
  &,
  &:hover,
  &:focus
    color: $dropdown-link-active-color
    text-decoration: none
    outline: 0
    background-color: $dropdown-link-active-bg

// Disabled state
//
// Gray out text and ensure the hover/focus state remains gray

.dropdown-menu > .disabled > a
  &,
  &:hover,
  &:focus
    color: $dropdown-link-disabled-color

// Nuke hover/focus effects
.dropdown-menu > .disabled > a
  &:hover,
  &:focus
    text-decoration: none
    background-color: transparent
    background-image: none
    // Remove CSS gradient
    +reset-filter
    cursor: not-allowed

// Open state for the dropdown
.open
  // Show the menu
  > .dropdown-menu
    display: block
  // Remove the outline when :focus is triggered
  > a
    outline: 0

// Dropdown section headers
.dropdown-header
  display: block
  padding: 3px 20px
  font-size: $font-size-small
  line-height: $line-height-base
  color: $dropdown-header-color

// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop
  position: fixed
  left: 0
  right: 0
  bottom: 0
  top: 0
  z-index: $zindex-dropdown - 10

// Right aligned dropdowns
.pull-right > .dropdown-menu
  right: 0
  left: auto

// Allow for dropdowns to go bottom up (aka, dropup-menu)
//
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?

.dropup,
.navbar-fixed-bottom .dropdown
  // Reverse the caret
  .caret
    // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
    // gets fixed, restore `border-top: 0;`.
    border-top: 0 dotted
    border-bottom: 4px solid $dropdown-caret-color
    content: ""
  // Different positioning for bottom up menu
  .dropdown-menu
    top: auto
    bottom: 100%
    margin-bottom: 1px

// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.

@media (min-width: $grid-float-breakpoint)
  .navbar-right
    .dropdown-menu
      right: 0
      left: auto