.ui-dropdown {
  &__menu {
    min-width: $ui-spacer * 10;
    padding: 8px 0;
    overflow: hidden;

    white-space: nowrap;

    background: ui-color(paper-supreme);

    background-clip: padding-box;
    border-style: solid;
    border-radius: $ui-br-border-radius;
  }

  &__item {
    @extend .ui-link;
    @extend .ui-display--block;
    @extend .ui-link--inherit-color;

    padding: 0.25rem 1.5rem;

    &:hover {
      background: rgba(0, 0, 0, 0.02);
    }
  }

  .ui-hr {
    margin: 8px 0;
  }

  .ui-dropdown__target ~ &__menu {
    @extend .ui-position--absolute;
    top: 100%;
    left: 0;

    display: none;
    margin: 8px 0;

    transform-origin: top left;
  }

  &--beside .ui-dropdown__target ~ &__menu {
    top: 0;
    left: 100%;

    margin-top: 0;
    margin-left: 8px;
  }

  &--open .ui-dropdown__target ~ &__menu {
    display: block;
  }

  &--rtl &__menu {
    right: 0;
    left: auto;
  }
}