@import "../../../style/mixin.less";

.@{prefix}-textarea {
    display: inline-block;
    width: 100%;
    height: 100%;
    resize: none;
    .use-var(font-size, textarea-font-size);
    .use-var(line-height, textarea-line-height);
    .use-var(caret-color, input-caret-color);

    &::placeholder {
        .use-var(color, input-placeholder-color);
    }

    &.fake-textarea {
        position: fixed;
        bottom: 100%;
        left: 0;
        visibility: hidden;
    }
}

.@{prefix}-input-container {

    .statistic-text {
        position: absolute;
        .rem(bottom, 16);
        .rem(right, 16);
        .use-var(font-size, textarea-statistic-font-size);
        .use-var(color, textarea-statistic-color);

        &.exceed {
            .use-var(color, danger-color);
        }
    }
}

/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
& when (@use-dark-mode = 1) {
    
  .process-bg-color-with-config,
  .process-custom-icon-bg-color-with-config {
    @{arco-dark-mode-selector} & {
      .use-var(color, dark-steps-process-with-config-item-icon-color);
      .use-var(color, dark-steps-process-with-config-item-icon-color);
    }
  }
  .wait-custom-icon-bg-color-with-config {
    @{arco-dark-mode-selector} & {
      .use-var(background, dark-steps-wait-icon-num-background);
      .use-var(color, dark-sub-info-font-color);
      .use-var(background, dark-steps-wait-icon-num-background);
      .use-var(color, dark-sub-info-font-color);
    }
  }
  .@{prefix}-textarea {
    @{arco-dark-mode-selector} & {
      .use-var(caret-color, dark-input-caret-color);
    }
    &::placeholder {
      @{arco-dark-mode-selector} & {
        .use-var(color, dark-input-placeholder-color);
      }
    }
  }
  .@{prefix}-input-container {
    .statistic-text {
      @{arco-dark-mode-selector} & {
        .use-var(color, dark-textarea-statistic-color);
      }
      &.exceed {
        @{arco-dark-mode-selector} & {
          .use-var(color, dark-danger-color);
        }
      }
    }
  }
}
/********************* End *************************/