@text-area-class: ~'@{icecream-prefix}-text-area';
@text-area-inner-class: ~'@{text-area-class}-inner';

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

  position: relative;
  width: 100%;

  &-inner {
    .extendBase();

    display: block;
    width: 100%;
    outline: none;
    resize: vertical;
    transition: all @icecream-transitions, height 0s; // 避免 resize 的延时

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

  &-count {
    .extendBase();

    position: absolute;
    right: 1px;
    padding: 0 (@icecream-gap-sm - 1px);
    color: @icecream-color-grey-7;
    background-color: @icecream-white;
    user-select: none;
    pointer-events: none;
  }

  // 跟隔壁 `input.less` `.sizeOf()` 实现一致
  .withBottom(@line-height, @font-size) {
    @content-line-height: getIcecreamLineHeightByPx(@font-size);
    @padding-y: (@line-height - @content-line-height) / 2 - 1px;

    bottom: @padding-y + 1px; // 1px 是边框宽度（border-width）
  }

  &-size-small &-count {
    .withBottom(@icecream-form-input-height-sm, @icecream-font-size-sm);
  }
  &-size-default &-count {
    .withBottom(@icecream-form-input-height-md, @icecream-font-size-md);
  }
  &-size-large &-count {
    .withBottom(@icecream-form-input-height-lg, @icecream-font-size-md);
  }

}

&.@{input-with-color-disabled-class} + .@{text-area-class}-count {
  background-color: @icecream-color-grey-3;
}