.ui-list {
  &__container {
    grid-area: list-container;
    grid-column-end: 7;
    max-height: 20rem;
    @extend .ui-scroll;
  }

  &__title {
    font-size: 0.9rem;
    padding: (0.5 * $base-spacing) $base-spacing;
  }

  &__item {
    text-align: center;
    cursor: pointer;
    padding: (0.5 * $base-spacing) $base-spacing;

    > .ui-badge {
      float: right;
      margin: 0;

      @at-root [dir="rtl"] & {
        float: left;
      }
    }

    &--selected {
      cursor: default;
      pointer-events: none;

      u {
        color: inherit;
      }
    }

    &--disabled {
      cursor: default;
      opacity: 0.5;
      pointer-events: none;

      u {
        color: inherit;
      }
    }
  }
}

.ui-dropdown {
  display: grid;

  &__link {
    padding: 0 0.25rem;
    display: flex;
    height: 100%;
    align-items: center;

    &[data-disabled="true"] {
      opacity: 0.5;
      pointer-events: none;
    }
  }

  &__icon {
    font-size: 1.25em;
    grid-area: icon;
  }

  &__label {
    grid-area: label;
    line-height: 1;
    padding: 0.5rem 0.25rem;
  }

  &__caret {
    grid-area: caret;
  }
}
