@multi-input-tag-class: ~'@{icecream-prefix}-multi-input-tag';

.@{multi-input-tag-class} {
  .extendBase();

  display: inline-flex;
  align-items: center;
  margin-right: @icecream-gap-xs;
  padding: 0 @icecream-gap-xs;
  .setFontSize(@icecream-font-size-1);
  color: @icecream-color-grey-9;
  background-color: @icecream-color-grey-3;
  border-radius: @icecream-border-radius;
  max-width: 109px; // text(6em) + icon(14px + 7px) + padding(8px * 2)

  &-text {
    .extendBase();
    .textEllipsis();
    flex: 1 1 auto;
  }

  &-icon {
    .extendBase();

    margin-left: 7px;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    color: @icecream-color-grey-6;
    cursor: pointer;

    &:hover {
      color: @icecream-color-grey-7; // TODO: 确认
    }
  }
}

.@{input-with-color-class}.@{input-with-color-disabled-class} {
  .@{multi-input-tag-class}-icon:hover {
    color: @icecream-color-grey-6;
    cursor: not-allowed;
  }
}