.dropdown {
  $dropdown-arrow-size: 10px;
  z-index: 999;
  position: absolute;
  margin-top: ($dropdown-arrow-size * 2);

  > .menu {
    @include drop-shadow("top");
    position: relative;
    padding: ($padding-x / 2) 0;
    min-width: 160px;
    font-size: $font-size-base;
    background-color: $brand-white;
    border: 1px solid $brand-gray;
    border-radius: $border-radius-base;
  }

  > .menu::before,
  > .menu::after {
    content: "";
    display: block;
    position: absolute;
    top: -($dropdown-arrow-size * 2);
    left: $dropdown-arrow-size;
    height: 0;
    width: 0;
    border: $dropdown-arrow-size solid transparent;
  }

  > .menu::before {
    // Because we're taking advantage of the color bleeding,
    // we need to show a darker color than the dropdown's border color.
    // Otherwise, it would appear lighter against the dropdown's border.
    border-bottom-color: $brand-black;
  }

  > .menu::after {
    border-bottom-color: $brand-white;
  }

  > .menu > a {
    display: block;
    width: 100%;
    padding: ($padding-x / 3) ($padding-y * 3);
    color: $brand-black;
  }

  > .menu > a,
  > .menu > a:hover {
    text-decoration: none;
  }

  > .menu > a:hover,
  > .menu > a.-active {
    color: $brand-white;
    background: $brand-primary;
  }

  > .menu > a.-disabled {
    color: $brand-gray-lt;
    cursor: not-allowed;
  }

  > .menu > a > .icon:first-child {
    width: 20px;
    // 16px is the default icon size
    // 4px = allowance
  }

  > .menu > .divider {
    height: 1px;
    margin: ($padding-x / 2) 0;
    background-color: $brand-gray;
  }

  > .menu > a .badge {
    float: right;
    background-color: $brand-primary;
    color: $brand-white;
  }

  > .menu > a:hover .badge {
    background-color: $brand-white;
    color: $brand-primary;
  }

  // Right
  &.-right > .menu::before {
    left: initial;
    right: $dropdown-arrow-size;
  }

  &.-right > .menu::before,
  &.-right > .menu::after {
    left: initial;
    right: $dropdown-arrow-size;
  }

  // Up
  &.-up {
    margin-top: -($dropdown-arrow-size * 2);
  }

  &.-up > .menu {
    @include drop-shadow(top);
  }

  &.-up > .menu::before,
  &.-up > .menu::after {
    top: initial;
    bottom: -($dropdown-arrow-size * 2);
    border-bottom-color: transparent;
  }

  &.-up > .menu::before {
    border-top-color: $brand-gray-dk;
  }

  &.-up > .menu::after {
    border-top-color: $brand-white;
  }
}