.#{$ns}ArrayInput {
  &-placeholder {
    color: $text--muted-color;
    padding-top: $Form-label-paddingTop;
  }

  &-addBtn {
    > svg {
      width: $Combo-addBtn-fontSize;
      height: $Combo-addBtn-fontSize;
    }

    font-size: $Combo-addBtn-fontSize;

    @include button-size(
      $Combo-addBtn-paddingY,
      $Combo-addBtn-paddingX,
      $Combo-addBtn-fontSize,
      $Combo-addBtn-lineHeight,
      $Combo-addBtn-borderRadius,
      $Combo-addBtn-height
    );

    @include button-variant(
      $Combo-addBtn-bg,
      $Combo-addBtn-border,
      $Combo-addBtn-color,
      $Combo-addBtn-onHover-bg,
      $Combo-addBtn-onHover-border,
      $Combo-addBtn-onHover-color,
      $Combo-addBtn-onActive-bg,
      $Combo-addBtn-onActive-border,
      $Combo-addBtn-onActive-color
    );

    &.is-disabled {
      pointer-events: none;
      opacity: $Button-onDisabled-opacity;
    }
  }

  &-toolbar {
    margin-top: $gap-sm;

    &--dnd {
      padding-left: 29px;
    }

    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  &-sortTip {
    color: $text--muted-color;
  }

  &-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: $gap-xs;

    > div {
      flex-grow: 1;
      width: 0;
      min-width: 120px;
      margin-right: $gap-xs;

      &:not(:first-child) {
        margin-left: $gap-xs;
      }
    }

    &--dragging {
      position: relative;
      opacity: 0.4;
    }
  }

  &-itemRemove,
  &-itemDrager {
    margin: 0;
    flex-grow: unset;
    display: inline-block;
    padding: $Form-label-paddingTop $gap-xs;
    cursor: pointer;

    > svg {
      color: $icon-color;
    }

    &:hover > svg {
      color: $icon-onHover-color;
    }
  }

  &-itemDrager {
    cursor: move;
  }
}