@mixin ui-dropdown($align: center, $width: 180px, $style: null) {

  @if $style == null {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid rgb(150,150,150);
    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
    margin: 0px;
    padding: 1px;
    text-align: left;

    ul, ol {
      margin: 0px;
      overflow: scroll;
      padding: 0px;

      > li {
        list-style: none;

        > a {
          display: block;
          margin: 2px 0px;
          padding: 6px 15px;
          text-decoration: none;

          &:hover {
            background: rgb(248,248,248);
          }
        }
      }
    }
  }

  @else {
    @extend %#{$style};
  }

  display: none;
  position: absolute;
  width: $width;
  z-index: 20;

  // position the dropdown absolute to its container
  @if $align == center {
    left: 50%;
    margin-left: -($width/2);
  }
  @else {
    #{$align}: 0%;
  }
}

.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-link {
  @include button(simple, $base-accent-color);
  font-size: $base-font-size;
}

.dropdown-menu {
  @include ui-dropdown(left, 11.25em);
}