.@{ns}-Selections {
  height: 100%;
  min-width: 200px;
  position: relative;
  display: flex;
  flex-direction: column;

  &-title {
    height: @Form-input-height;
    background: @Table-thead-bg;
    font-size: @Form-input-fontSize;
    padding: calc((@Form-input-height - @Form-input-lineHeight * @Form-input-fontSize) / 2)
      @gap-base;
  }

  &-placeholder {
    color: @Form-input-placeholderColor;
    text-align: center;
    width: 100%;
    flex-basis: @Form-input-height;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: @Form-input-fontSize;
  }

  &-items {
    flex-grow: 1;
  }

  &-item {
    display: flex;
    flex-direction: row;
    height: @Form-input-height;
    line-height: @Form-input-lineHeight;
    font-size: @Form-input-fontSize;
    padding: calc((@Form-input-height - @Form-input-lineHeight * @Form-input-fontSize) / 2)
      @gap-base;

    > label {
      flex-basis: 50px;
      flex-grow: 1;
      overflow: hidden;
    }

    > .@{ns}-Selections-dragbar {
      width: @gap-lg;
      position: relative;
      left: calc(@spacing-2 * -1);
      color: @icon-color;
      cursor: move;
    }

    &--dragging {
      > * {
        opacity: 0.2;
      }
    }
  }

  &-delBtn {
    color: @icon-color;
    cursor: pointer;

    &:hover {
      color: @icon-onHover-color;
    }

    > svg {
      width: 12px;
      height: 12px;
    }
  }
}