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

// Dropdown arrow/caret

.dropdown-toggle {
  &:after {
    margin-left: 8px;
    vertical-align: middle;
    content: "";
    border-top:   $caret-width-base-vertical solid;
    border-right: $caret-width-base solid transparent;
    border-left:  $caret-width-base solid transparent;
    border-bottom: 0;
    transition: border-color .25s, color .25s;

    .dropup & {
      border-top: 0;
      border-right: $caret-width-base solid transparent;
      border-bottom: $caret-width-base-vertical solid;
      border-left: $caret-width-base solid transparent;
      margin: 0;
      vertical-align: middle;
    }
  }
}

// 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 {
    @include nav-divider($dropdown-divider-bg);
  }

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

    // Hover/Focus state
    &:hover,
    &:focus {
      color: $dropdown-link-hover-color;
      background-color: $dropdown-link-hover-bg;
    }
  }

  > li:first-child > a:first-child {
    @include border-top-radius($dropdown-border-radius);
  }
  > li:last-child > a:first-child {
    @include 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;
        }
      }
    }
  }
}

// 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 {
  // 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 {
    @include 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.scss and the modified component alignment there.

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