//
// Dropdowns
// --------------------------------------------------

.dropdown-menu {
  font-size: 13px;
  margin: 2px 0 0;
  box-shadow: 0 3px 20px rgba($gray-dark, .3), 0 1px 2px rgba(#000, .05), 0 0 0 1px rgba($gray-dark, .1);
  border: none;

  > li > a {
    padding: 4px 12px 3px;

    .icon {
      position: relative;
      margin: -2px 4px 0 2px;
    }
  }

  .dropdown-menu-scroll {
    overflow: auto;
    max-height: 480px;
    margin: -5px 0;
    padding: 5px 0;

    &::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }

    &::-webkit-scrollbar-thumb {
      width: 5px;
      height: 5px;
      border: 3px solid $well-bg;
      border-radius: 10px;
      background-clip: border-box;
      box-shadow: inset 0 0 0 1px rgba($gray-light, .5);
      background: rgba($gray-light, .5);
      border: 3px solid #fff;
    }

    &::-webkit-scrollbar-button {
      width: 0;
      height: 0;
      display: none;
    }

    // Re-apply Bootstrap's very specific styles
    > li > a {
      display: block;
      padding: 3px 12px;
      clear: both;
      font-weight: normal;
      font-size: 13px;
      line-height: $line-height-base;
      color: $dropdown-link-color;
      white-space: nowrap; // prevent links from randomly breaking onto new lines

      &:hover,
      &:focus {
        text-decoration: none;
        color: $dropdown-link-hover-color;
        background-color: $dropdown-link-hover-bg;
      }
    }

    > .active > a {
      &,
      &:hover,
      &:focus {
        color: $dropdown-link-active-color;
        text-decoration: none;
        outline: 0;
        background-color: $dropdown-link-active-bg;
      }
    }

    > .disabled > a {
      &,
      &:hover,
      &:focus {
        color: $dropdown-link-disabled-color;
      }

      // Nuke hover/focus effects
      &:hover,
      &:focus {
        text-decoration: none;
        background-color: transparent;
        background-image: none; // Remove CSS gradient
        @include reset-filter;
        cursor: $cursor-disabled;
      }
    }
  }

  &.with-point {
    margin: 8px 0 0;

    &::after {
      content: '';
      position: absolute;
      top: -13px;
      left: 0;
      width: 30px;
      height: 13px;

      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAAXNSR0IArs4c6QAAAYhJREFUOBGVULtOAlEQFXxD6RdYam1HpDPREENhYYHUVITS2BA6bWjZzvgP2lmjrUZrbdZHAYEF15CsEeese26uI8tjksm8zpwz9ybmprfElNDhNLhJZJPmkzRij4gj1n1dzyr47wBNOK7WszhxW8TOgTe1JrNr5oxYtHPU2gyxDJgzAmtym2hUzh4jlpEnM5mdNRTN5nVbwre4IbVy9hhl9AcXkoEwJJWYFJ+PfEEifDHytONcFHq9/l2//3HfaJwfST9lzYnnPrjg5Ec0xiZBXLIFlwSdrtedgyD46gwjC4Kggx5m4sDwQOySh7zUkdGvsQEAwVo0Vaud7g4GgzeKMkrvvVo925NdvHycOHVCVRa8CsL8LlwPolS5fLLt+/4TxXSU2XOlcpwFNtrBLnnASX7qmb8f9VqIrhaLpa1ut/ugxXTted4jsNgR58v1l8cK80pcvJLLHW60Wu0bLRJXC/Y2ny9sYld81KvHCmNhOZvdX3fdl0sR+ZzFXff1CrvgsMT53aHwDzqEBw7ZOUAbAAAAAElFTkSuQmCC') no-repeat;

      @include retina {
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAaCAYAAADrCT9ZAAAAAXNSR0IArs4c6QAABHNJREFUWAm9Vt1rm1UcXj6arNU2KowWP2DNRkqgYywpXWhs61y7mw4KK+IuhoIjV068mbDp1S7cBqIXA/0L9HIwKXi1XWwwLwqdKJbOybqWCl3b2K3E6j6M8/e83S97evKevCdp9cDp+X0+v+c5b/KmoW3/zwo5jnniWNdwmSsR1wFbjadzt+wiNktws/0qqN6z4QtolHC9fa719Qqpt36bKxF9Ai71LjWK53K6iHKp8Wa5kguqC8qrMFudK+GguqB84BO2EYSAWjmXvF6C7QwiXytvzTVK2tZni9tEucZtAuqN13xKNvJ+cb+YiqmV0xo+bSJQ45fzi9lqrYJtJP3irjEW5Wr7iXGN+Yquh6xZa/oY4BfjuOb1VPLmiR5emq8V86tB/Ya4DmYgl5hZY/rA4xjsUHt7e3TXrkxHJNL0HArK5cdrt2/fuLu4uPi3uCDG5NhGOZYZC/KreqIezLM/TFKjZqwRP9zZ2Z1IJtPJ8+dPjyaTO/MAn5mZvX7q1LlvW1qmZ+7c+XlVQv/IVhE6R320IFaP79eDWGUBkHdYfN4R8Xnjwng3ic87Ln6ziG0fG3tnqFj8/foTY0ns+7Gx94ZQg1rZ6GEM2DwDNnOAzRxhswbYvsssgs9A5hAmYRKMSa8ntqNj946DB48cWFhYvGporbiSu3bo0Ftvolb6VDQwTFyeafJhrn5aBG7jMosYADYP4MFMCiQrYtvaXn0pnx/pn52dG6+osxhzc/Pjg4Mj/egRDBZtCufZzMnka+rZqFY8s4ABGJgH2sS2JBKJF3O54fzU1M2vLRqrwtPTt75BD3qFT4tsfEr0EnkWc2BuzNnUI1DPlpnkRtgKyoOYgJLCiaeT2L9/KDcxMflllaqAwMTEja/QC4ynWIzNM5mL8jN5m7oEcn2ZCW5UMJw6hAczIYht7e0d7rl8+drZAG3W9JUrV88BA1iygckzeLbyYY7M3dQlUOuLE9wAW8EUHKcOZSIg9nxPz9C+ixfHT4uaslVRcKJ86dJ3HwMLmLJtopmT8jT5szZPDAK82Pez/WLesGx2oPPEicLA0aNHPg2FQriURleoq2t3fzwe+2V+fvn+wsIcfqOx+DcYPnOBj+UXW89IDkTNAvbV1pMBNeZ9CrLZN147duztvkLh3c/C4TBeOJtacmGRPXvSAw8fPppaXl4T0bOlp4AQrbN5hl+M855dr2AGhY0d7e7u6xgdPdx78uT7n0ej0ReqpjQYkIuLZbN7X19aWvmxWFy7v7Q0/6dAuTxl60RTsClIGzXOJ+xIOt23Y3j4QObMmY++iMfj+G9pS1ckEmnO5TI5+Z3+4d69x6vF4m9/yQBTtDlTeSLOtleHgG7+wnvfS8nh1JcDv6y2d3Xte/n48Q9GSqU/bgW/hzZXUSqt/VoofHg4ldr7ivDZLhsvTOWj/Jgza1F9Vd9hvg219RT8ym2FU6lsaybTm75w4ewnbW2tOyWHm//PdizW1Dw4mE9NTt786cGD8urKyt1HMs980sxV0tXrX5i0cpIDU/r5AAAAAElFTkSuQmCC');
        background-size: 30px 13px;
      }
    }

    &.dropdown-menu-right {

      &::after {
        left: auto;
        right: 0;
      }
    }
  }

  &.dropdown-menu-center {
    margin-left: 50%;
    @include transform(translateX(-50%));

    &.with-point {

      &::after {
        left: 50%;
        @include transform(translateX(-50%));
      }
    }
  }

  .dropup & {
    margin: 0 0 2px;

    &.with-point {
      margin: 0 0 8px;

      &::after {
        @include rotate(180deg);
        top: auto;
        bottom: -13px;
      }
    }
  }
}