@text-input-class: ~'@{icecream-prefix}-text-input';
@text-input-inner-class: ~'@{text-input-class}-inner';
@text-input-prefix-class: ~'@{text-input-class}-prefix';
@text-input-suffix-class: ~'@{text-input-class}-suffix';
@text-input-clear-class: ~'@{text-input-class}-clear';

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

  display: flex;
  flex-direction: row;

  .@{text-input-inner-class} {
    .extendBase();

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

    // TODO: IE 支持？
    &::placeholder {
      color: @icecream-color-grey-7;
    }
  }

  .@{text-input-prefix-class}, .@{text-input-suffix-class} {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: @icecream-color-grey-7;
  }

  .@{text-input-prefix-class} {
    margin-right: @icecream-gap-xs;
  }

  .@{text-input-suffix-class} {
    margin-left: @icecream-gap-xs;
  }

  .@{text-input-clear-class} {
    .extendBase();
    .inputOperationIcon();
    padding: 0;
    border: none;
    background: none;

    &:not(:last-child) {
      margin-right: @icecream-gap-xs;
    }

    svg {
      display: block;
      height: 100%;
    }
  }
}