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

.@{tags-input-class} {
  .extendBase();

  display: inline-flex;
  align-items: center;
  overflow: hidden;

  &-content {
    flex: 1 1 0;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
  }

  &-text-input {
    .extendBase();

    // 解决 input 在 flex 布局中不能正确收缩（shrink）的问题
    // 设置 width: 100% 后 input 会表现得像一个正常的 div
    width: 100%;
    flex: 1 0 40px;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    cursor: inherit;
    .setFontSize(inherit);

    &::placeholder {
      color: @icecream-color-grey-7;
    }
  }

  &-clear {
    .extendBase();
    .inputOperationIcon();

    opacity: 0;
    margin-left: @icecream-gap-xs;

    &-invisible {
      visibility: hidden;
      pointer-events: none;
    }
  }

  &:hover &-clear {
    opacity: 1;
  }

  &.@{input-with-color-class}.@{input-with-color-disabled-class} {
    background-color: @icecream-color-grey-2; // TagsInput 禁用背景色浅一点
  }

  &.@{input-with-size-class}-size-small {
    .tags-input-content-size(16px, @icecream-form-input-height-sm, 2px);
  }

  &.@{input-with-size-class}-size-default {
    .tags-input-content-size(20px, @icecream-form-input-height-md, 4px);
  }

  &.@{input-with-size-class}-size-large {
    .tags-input-content-size(24px, @icecream-form-input-height-lg, 6px);
  }
}

.tags-input-content-size(
  @tag-height, // tag & input 的高度
  @input-height, // 控件本身高度（单行内容的情况下）
  @line-gap // 相邻行的间距
) {
  @padding: (@input-height - 2px - @tag-height) / 2;
  padding-top: @padding;
  padding-bottom: @padding;
  .@{multi-input-tag-class}, .@{tags-input-class}-text-input {
    margin-bottom: @line-gap;
    height: @tag-height;
    line-height: @tag-height;
  }
  .@{tags-input-class}-content {
    margin-bottom: -@line-gap;
  }
}