.drdn {
  position: relative;

  &.expanded {
    > .drdn-content {
      display: block;
    }

    > .drdn-trigger {
      @if $use-font-awesome {
        &::after {
          content: $fa-var-caret-up;
        }
      } @else {
        @extend %image-arrow-up;
      }
    }
  }

  &-trigger {
    @extend %form-field;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    user-select: none;
    cursor: pointer;

    @if $use-font-awesome {
      @extend %fa-icon-after;

      &::after {
        position: absolute;
        top: ($font-size-base / 2);
        right: $input-padding-horizontal;
        content: $fa-var-caret-down;
      }
    } @else {
      @extend %image-arrow-down;
      background-repeat: no-repeat;
      background-position: right ($input-padding-horizontal / 2) center;
    }
  }

  &-content {
    @include nice-shadow(2);
    display: none;
    position: absolute;
    top: $input-height-base + $btn-padding-vertical;
    right: 0;
    border-radius: $border-radius-base;
    background: $main-menu-dropdown-bg;
    overflow: hidden;
    z-index: 1002;
  }

  &-items {
    max-height: 400px;
    color: $gray-light;
    overflow: auto;

    &:empty {
      border: 0;
    }

    &.selection {
      > a,
      > span {
        &::before {
          display: inline-block;
          width: 1em;
          font-weight: bold;
          content: " ";
        }

        @if $use-font-awesome {
          @extend %fa-icon;
        }
      }

      > .selected::before {
        @if $use-font-awesome {
          content: $fa-var-check;
        } @else {
          content: "\2713 ";
        }
      }
    }

    > a,
    > span {
      display: block;
      padding: $btn-padding-vertical $btn-padding-horizontal;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}