.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: @dropdown-zindex;
  display: none; // none by default, but block on "open" of the menu
  float: left;
  min-width: 160px;
  padding: 0;
  margin: 2px 0 0; // override default ul
  list-style: none;
  font-size: @font-size-base;
  background-color: @dropdown-background;
  border: 1px solid @dropdown-border-color;
  border-radius: @border-radius-base;
  .box-shadow(0 6px 12px rgba(0, 0, 0, .175));
  background-clip: padding-box;

  &.open {
    display: block;
  }

  &.dropdown-left {
    left: auto;
    right: 4%;

    .dropdown-caret {
      right: 14px;
      left: auto;
    }
  }

  .dropdown-caret {
    position: absolute;
    top: -8px;
    left: 14px;
    width: 18px;
    height: 10px;
    float: left;
    overflow: hidden;

    .caret-outer {
      position: absolute;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-bottom: 9px solid rgba(0, 0, 0, 0.1);
      height: auto;
      left: 0;
      top: 0;
      width: auto;
      display: inline-block;
      margin-left: -1px;
    }

    .caret-inner {
      position: absolute;
      display: inline-block;
      margin-top: -1px;
      top: 0;
      top: 1px;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-bottom: 9px solid @dropdown-background;
    }
  }

  .buttons {
    .clearfix();
    border-bottom: 1px solid @sidebar-divider-color;

    &:last-child {
      border-bottom: none;
    }

    .button {
      border: 0;
      background-color: transparent;
      color: @dropdown-button-color;
      width: 100%;
      text-align: center;
      float: left;
      line-height: @line-height-base;
      padding: 8px 4px;

      &:hover {
        color: @dropdown-button-hover-color;
      }

      &:focus,
      &:hover {
        outline: none;
      }

      &.size-2 {
        width: 50%;
      }

      &.size-3 {
        width: 33%;
      }

      &.size-4 {
        width: 25%;
      }
    }
  }
}


/*
 * Theme 1
 */

.color-theme-1 {
  .dropdown-menu {
    background-color: @dropdown-background-1;
    border-color: @dropdown-border-color-1;

    .dropdown-caret .caret-inner {
      border-bottom: 9px solid @dropdown-background-1;
    }

    .buttons {
      border-color: @dropdown-divider-color-1;
    }

    .button {
      color: @dropdown-button-color-1;

      &:hover {
        color: @dropdown-button-hover-color-1;
      }
    }
  }
}

/*
* Theme 2
*/

.color-theme-2 {
  .dropdown-menu {
    background-color: @dropdown-background-2;
    border-color: @dropdown-border-color-2;

    .dropdown-caret .caret-inner {
      border-bottom: 9px solid @dropdown-background-2;
    }

    .buttons {
      border-color: @dropdown-divider-color-2;
    }

    .button {
      color: @dropdown-button-color-2;

      &:hover {
        color: @dropdown-button-hover-color-2;
      }
    }
  }
}