@use '@style/theme/index.scss' as theme;
@use 'sass:string';
@use '@components/input/style/token.scss' as *;
@use '@components/input/style/input.scss' as *;

$textarea-prefix-cls: string.unquote('#{theme.$prefix}-textarea');

.#{$textarea-prefix-cls}-wrapper {
  @include input-wrapper-style($textarea-prefix-cls);

  position: relative;
  display: inline-block;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  overflow: hidden;

  &.#{$textarea-prefix-cls}-fit-width {
    width: fit-content;
  }

  &.#{$textarea-prefix-cls}-max-w-full {
    max-width: 100%;
  }

  .#{$textarea-prefix-cls}-word-limit {
    position: absolute;
    right: $textarea-layout-tip-right;
    bottom: $textarea-layout-tip-bottom;
    color: $textarea-color-tip-text;
    font-size: $textarea-font-tip-size;
    user-select: none;
  }

  &.#{$textarea-prefix-cls}-scroll .#{$textarea-prefix-cls}-word-limit {
    right: $textarea-layout-tip-right + 15px;
  }

  .#{$textarea-prefix-cls}-clear-btn {
    position: absolute;
    top: 50%;
    right: $textarea-layout-tip-right;
    transform: translateY(-50%);
  }

  &.#{$textarea-prefix-cls}-scroll .#{$textarea-prefix-cls}-clear-btn {
    right: $textarea-layout-tip-right + 15px;
  }

  &:hover {
    .#{$textarea-prefix-cls}-clear-btn {
      display: block;
    }
  }

  .#{$textarea-prefix-cls}-mirror {
    position: absolute;
    visibility: hidden;
  }
}

.#{$textarea-prefix-cls} {
  @include input-style();

  display: block;
  box-sizing: border-box;
  height: 100%;
  min-height: $textarea-size-min-height;
  padding: $textarea-padding-vertical $textarea-padding-horizontal;
  font-size: $textarea-font-size;
  line-height: theme.$line-height-base;
  vertical-align: top;
  resize: vertical;
}