// DROPDOWN MENUS
// --------------

// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
.dropup,
.dropdown {
  position: relative;
}

button.dropdown-toggle:active,
.btn-group.open button.btn.dropdown-toggle {
    outline: 0;
    background-color: #383838;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: #383838;
}

// Dropdown arrow/caret
// --------------------
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-top:   4pt solid @zenburnFgLight;
  border-right: 4pt solid transparent;
  border-left:  4pt solid transparent;
  content: "";
}
.btn-group:hover .caret {border-top:   4pt solid @zenburnFgDark;}

// Place the caret
.dropdown .caret {
  margin-top: 8pt;
  margin-left: 2pt;
}

// The dropdown menu (ul)
// ----------------------
.btn-group > .btn.dropdown-toggle {
    transition: color 0.1s;
    border: 1pt solid @green;
}

.btn-group > button.btn.dropdown-toggle {
    z-index: @zindexDropdown + 10;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: @zindexDropdown;

  transition: transform 0.15s, width 0.15s;
  transform: scaleY(0);
  transform-origin: top;

  margin: 0; // override default ul
  margin-top: -1pt;

  float: left;
  width: 100%;
  padding: 4pt 0;
  list-style: none;
  background-color: @dropdownBackground;
  border: 1pt solid @green;
  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();
  }

  // Links within the dropdown menu
  a {
    display: block;
    padding: 3pt 15pt;
    clear: both;
    font-weight: normal;
    line-height: @baseLineHeight;
    color: @dropdownLinkColor;
    white-space: nowrap;
  }

  .dropdown-header {
      display: block;
      padding: 3pt 15pt;
      font-size: 11pt;
      font-weight: bold;
      line-height: @baseLineHeight;
      color: @zenburnFgLight;
      text-transform: uppercase;
    }

  .search {
      background-color: rgba(63,63,63, 0.8);
      margin: 3%;
      max-width: 94%;
  }
}

// Hover state
// -----------
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
  color: @dropdownLinkColorHover;
  text-decoration: none;
  background-color: @dropdownLinkBackgroundHover;
}

// Open state for the dropdown
// ---------------------------
.open {
    .dropdown-menu {
        transform: scaleY(1);
        backface-visibility: hidden;
        width: calc(100% + 52pt);
    }
}

// Right aligned dropdowns
// ---------------------------
.pull-right .dropdown-menu {
  right: 0;
  left: auto;
}