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

// Dropdown arrow/caret
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-top:   @caret-width-base-vertical solid;
  border-right: @caret-width-base solid transparent;
  border-left:  @caret-width-base solid transparent;
  transition: border-color .25s, color .25s;
}

// The dropdown menu (ul)
.dropdown-menu {
  z-index: @zindex-dropdown;
  background-color: @dropdown-bg;
  min-width: 220px;
  border: none;
  margin-top: 9px;
  padding: 0;
  font-size: ceil((@component-font-size-base * 0.933)); // ~14px
  border-radius: @dropdown-border-radius;
  box-shadow: none;

  // Dividers (basically an hr) within the dropdown
  .divider {
    .nav-divider(@dropdown-divider-bg);
  }

  // Links within the dropdown menu
  > li > a {
    padding: 8px 16px;
    line-height: 1.429; // 20px
    color: @dropdown-link-color;
  }

  > li:first-child > a:first-child {
    .border-top-radius(@dropdown-border-radius);
  }
  > li:last-child > a:first-child {
    .border-bottom-radius(@dropdown-border-radius);
  }

  // Typeahead (deprecated)
  &.typeahead {
    display: none;
    width: auto;
    margin-top: 5px;    
    border: 2px solid @brand-secondary;
    padding: 5px 0;
    background-color: @inverse;
    border-radius: @border-radius-large;

    li {
      a {
        padding: 6px 14px;
      }
      &:first-child,
      &:last-child {
        a {
          padding: 6px 14px;
          border-radius: 0;
        }
      }
    }
  }
}

// Hover/Focus state
.dropdown-menu > li > a {
  &:hover,
  &:focus {
    color: @dropdown-link-hover-color;
    background-color: @dropdown-link-hover-bg;
  }
}

// Active state
.dropdown-menu > .active > a {
  &,
  &:hover,
  &:focus {
    color: @dropdown-link-active-color;
    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;
    background-color: transparent;
    cursor: @cursor-disabled;
  }
}

// Menu positioning
//
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
// menu with the parent.
.dropdown-menu-right {
  left: auto; // Reset the default from `.dropdown-menu`
  right: 0;
}
// With v3, we enabled auto-flipping if you have a dropdown within a right
// aligned nav component. To enable the undoing of that, we provide an override
// to restore the default dropdown menu alignment.
//
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
// `.pull-right` nav component.
.dropdown-menu-left {
  left: 0;
  right: auto;
}

// Dropdown section headers
.dropdown-header {
  padding: 8px 16px;
  line-height: 1.538; // 20px
  font-size: floor((@component-font-size-base * 0.867)); // 13px
  text-transform: uppercase;
  color: @dropdown-header-color;

  &:first-child {
    margin-top: 3px;
  }
}

// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
  z-index: (@zindex-dropdown - 10);
}

// Allow for dropdowns to go bottom up (aka, dropup-menu)
//
// Just add .dropup after the standard .dropdown class and you're set, bro.

.dropup,
.navbar-fixed-bottom .dropdown {
  // Reverse the caret
  .caret {
    border-bottom: @caret-width-base-vertical solid;
    margin-bottom: .25em;
  }
  // Different positioning for bottom up menu
  .dropdown-menu {
    margin-top: 0;
    margin-bottom: 9px;
  }
}

// Inversed Dropdown Menu
// 
// ## Alternative color variation for dropdown

.dropdown-menu-inverse {
  background-color: @dropdown-inverse-bg;

  // Dividers
  .divider {
    .nav-divider(@dropdown-inverse-divider-bg);
  }
  // Links within the dropdown menu
  > li > a {
    color: @dropdown-inverse-link-color;
  }
  // Hover/Focus state
  > li > a {
    &:hover,
    &:focus {
      color: @dropdown-inverse-link-hover-color;
      background-color: @dropdown-inverse-link-hover-bg;
    }
  }

  // Active state
  > .active > a {
    &,
    &:hover,
    &:focus {
      color: @dropdown-inverse-link-active-color;
      background-color: @dropdown-inverse-link-active-bg;
    }
  }

  // Disabled state
  //
  // Gray out text and ensure the hover/focus state remains gray
  > .disabled > a {
    &,
    &:hover,
    &:focus {
      color: @dropdown-inverse-link-disabled-color;
    }
  }
  // Nuke hover/focus effects
  > .disabled > a {
    &:hover,
    &:focus {
      background-color: transparent;
    }
  }

  // Dropdown section headers
  .dropdown-header {
    color: @dropdown-inverse-header-color;
  }  
}

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

@media (min-width: @grid-float-breakpoint) {
  .navbar-right {
    .dropdown-menu {
      .dropdown-menu-right();
    }
    // Necessary for overrides of the default right aligned menu.
    // Will remove come v4 in all likelihood.
    .dropdown-menu-left {
      .dropdown-menu-left();
    }
  }
}