@import "../lib.less";
@import "../variables/components/textarea.less";
@import "../variables/components/input.less";

.@{veui-prefix}-textarea {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: @veui-textarea-width;
  border: 1px solid @veui-input-border-color;
  background-color: @veui-background-color-normal;
  font-size: @veui-textarea-font-size-m;
  line-height: @veui-textarea-line-height;
  color: @veui-input-font-color;
  min-height: @veui-textarea-height-m;
  border-radius: @veui-input-border-radius-m;
  .veui-transition(border-color, color, box-shadow);

  @line-number-default-width: @veui-height-m;

  &:hover {
    border-color: @veui-textarea-border-color-hover;
  }

  &-resizable &-input {
    resize: vertical;
  }

  &.@{veui-prefix}-readonly {
    border-color: @veui-input-border-color-read-only;
    background-color: @veui-input-background-color-read-only;

    &:hover {
      border-color: @veui-textarea-border-color-hover;
      color: @veui-input-font-color-read-only;
    }

    & .@{veui-prefix}-textarea-input {
      background-color: @veui-input-background-color-disabled;
      color: @veui-input-font-color-read-only;
    }
  }

  &.@{veui-prefix}-disabled {
    &,
    &:hover {
      border-color: @veui-input-border-color-disabled;
      color: @veui-input-font-color-disabled;
    }

    & .@{veui-prefix}-textarea-input {
      background-color: @veui-input-background-color-disabled;
      color: @veui-input-font-color-disabled;
    }

    &,
    & .@{veui-prefix}-textarea-input {
      cursor: not-allowed;
    }
  }

  &.@{veui-prefix}-focus {
    &,
    &:hover {
      .veui-focus-ring(@veui-input-border-color-focus, @veui-input-shadow-focus);
    }
  }

  &.@{veui-prefix}-invalid {
    border-color: @veui-input-border-color-error;
    color: @veui-input-font-color-error;
  }

  &.@{veui-prefix}-invalid:hover {
    border-color: @veui-input-border-color-error-hover;
  }

  &.@{veui-prefix}-invalid.@{veui-prefix}-focus {
    .veui-focus-ring(
      @veui-input-border-color-error-focus,
      @veui-input-shadow-error-focus
    );
  }

  // 不要给 textarea 设置背景色，不然在 IE9 下面光标位置会很难看，同时引起一些其他怪异问题
  &-input {
    position: relative;
    float: right;
    width: 100%;
    padding: @veui-textarea-padding-y @veui-textarea-padding-x;

    // 和外部容器的高度保持一致
    height: inherit;
    min-height: inherit;
    max-height: inherit;

    border: none;
    outline: none;
    z-index: 1;
    resize: none;
  }

  &-input {
    font: inherit;
  }

  &-rows {
    min-height: auto;
  }

  &-rows &-input {
    height: auto;
  }

  &-measurer {
    .absolute(0);
    overflow: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: @veui-font-color-weak;
    .padding(@veui-textarea-padding-y, _);

    &-line {
      &-number {
        float: left;
      }
      &-content {
        overflow: hidden;
        visibility: hidden;
      }
    }
  }

  &-autoresize &-measurer {
    bottom: auto;
    min-height: inherit;
  }

  &-count {
    .absolute(_, @veui-textarea-padding-x, @veui-textarea-padding-y, _);
    margin-left: @veui-input-content-spacing;
    padding: 0 @veui-textarea-count-padding;
    line-height: @veui-textarea-count-height;
    background-color: @veui-textarea-count-background-color;
    font-size: @veui-textarea-count-font-size;
    color: @veui-textarea-count-font-color;
    z-index: 2;
    border-radius: @veui-textarea-count-border-radius;
    font-variant-numeric: tabular-nums;
    .veui-transition(background-color, color);
    &-overflow {
      background-color: @veui-textarea-count-background-color-error;
    }
  }

  &[ui~="s"] {
    font-size: @veui-textarea-font-size-s;
    min-height: @veui-textarea-height-s;
    border-radius: @veui-input-border-radius-s;
  }
}