.dropdown-menu {
  z-index: 9999;
  position: absolute;
  background: $gab-background-container;
  border-radius: 4px;
  border: 1px solid $gab-placeholder-accent;
  padding: 4px 0;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);

  &.left {
    transform-origin: 100% 50%;
  }

  &.top {
    transform-origin: 50% 100%;
  }

  &.bottom {
    transform-origin: 50% 0;
  }

  &.right {
    transform-origin: 0 50%;
  }

  &__arrow {
    position: absolute;
    border: 0 solid transparent;

    @include size(0);

    &.left {
      right: -5px;
      margin-top: -5px;
      border-width: 5px 0 5px 5px;
      border-left-color: $gab-placeholder-accent;
    }

    &.top {
      bottom: -5px;
      margin-left: -5px;
      border-width: 5px 5px 0;
      border-top-color: $gab-placeholder-accent;
    }

    &.bottom {
      top: -5px;
      margin-left: -5px;
      border-width: 0 5px 5px;
      border-bottom-color: $gab-placeholder-accent;
    }

    &.right {
      left: -5px;
      margin-top: -5px;
      border-width: 5px 5px 5px 0;
      border-right-color: $gab-placeholder-accent;
    }
  }

  ul {
    overflow: hidden;
    padding: 6px 0;
  }

  &__item a {
    display: block;
    box-sizing: border-box;
    padding: 3px 10px 1px;
    text-decoration: none;
    text-transform: capitalize;
    color: $gab-secondary-text;

    @include text-overflow;
    @include text-sizing(13px, 400, 26px);

    &:focus,
    &:hover,
    &:active {
      outline: 0;
      color: $gab-text-highlight;
      background: $gab-background-base !important;
      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
    }
  }

  &__separator {
    display: block;
    margin: 10px !important;
    height: 1px;
    background: $gab-background-base;
  }
}