@import "../lib.less";

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

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

  &:hover {
    border-color: @dls-input-border-color-hover;
  }

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

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

    &:hover {
      border-color: @dls-input-border-color-read-only-hover;
    }
  }

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

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

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

  &.@{veui-prefix}-readonly &-input,
  &.@{veui-prefix}-disabled &-input {
    background: transparent;
  }

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

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

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

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

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

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

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

  &-input,
  &-measurer {
    font: inherit;
  }

  &-rows {
    min-height: auto;
  }

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

  &-measurer + &-input {
    max-width: calc(100% - @dls-height-m);
  }

  &-measurer {
    .absolute(0);
    overflow: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: @dls-foreground-color-neutral-weak;

    &-line {
      &:first-child {
        margin-top: @dls-textarea-padding-y;
      }

      &:last-child {
        margin-bottom: @dls-textarea-padding-y;
      }

      &-number {
        float: left;
        position: relative;
        min-width: @line-number-default-width;
        text-align: center;

        &::before {
          content: "";
          .absolute(-@dls-textarea-padding-y, 0, _, _);
          .size(1px, 9999px);
          background-color: @dls-input-border-color;
          z-index: 2;
        }
      }

      &-content {
        .padding(_, @dls-textarea-padding-x);
        overflow: hidden;
        visibility: hidden;
      }
    }
  }

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

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

    &-overflow {
      background-color: @dls-textarea-count-background-color-error;
      color: @dls-textarea-count-font-color-error;
    }
  }

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

  &-count-overlap &-input {
    padding-bottom: dls-sum(
      @dls-textarea-padding-y,
      dls-line-height(@dls-textarea-line-height, @dls-textarea-font-size-m)
    );
  }

  &-count-overlap &-measurer-line:last-child {
    margin-bottom: dls-sum(
      @dls-textarea-padding-y,
      dls-line-height(@dls-textarea-line-height, @dls-textarea-font-size-m)
    );
  }

  &-count-overlap[ui~="s"] &-input {
    padding-bottom: dls-sum(
      @dls-textarea-padding-y,
      dls-line-height(@dls-textarea-line-height, @dls-textarea-font-size-s)
    );
  }

  &-count-overlap[ui~="s"] &-measurer-line:last-child {
    margin-bottom: dls-sum(
      @dls-textarea-padding-y,
      dls-line-height(@dls-textarea-line-height, @dls-textarea-font-size-s)
    );
  }
}