@use '../../../_styles/mixin.scss' as *;
@use './var.scss';
.o_textarea {
  color: var(--color);
  max-width: 100%;
  max-height: inherit;
  min-width: inherit;
  min-height: inherit;
  cursor: inherit;
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

.o_textarea-disabled {
  color: var(--color-disabled);
}

.o_textarea-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.o_textarea-textarea {
  padding: var(--padding-v) var(--padding-h);
  display: block;
  outline: none;
  border: none;
  color: inherit;
  cursor: inherit;
  background-color: transparent;
  line-height: inherit;
  height: 100%;
  width: 100%;
  font-size: inherit;
  min-width: 100%;
  max-width: 100%;
  appearance: none;
  z-index: 1;

  &::-webkit-input-placeholder {
    color: var(--placeholder, var(--o-color-info4));
  }

  &:autofill {
    box-shadow: 0 0 0px 1000px var(--bg-color) inset !important;
  }
  .o_textarea-invalid & {
    text-decoration: line-through;
  }
}
.o_textarea-disabled {
  cursor: not-allowed;
}
.o_textarea-readonly {
  cursor: text;
}

.o_textarea-clear {
  right: 4px;
  top: 50%;
  font-size: var(--icon-size);
  margin-top: calc(var(--icon-size) / -2);
  border-radius: 50%;
  visibility: hidden;
  flex-shrink: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-color);
  cursor: pointer;
  transform: scale(0.5);
  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
  z-index: 2;

  @include x-svg-hover;

  @include hoverable {
    &:hover {
      color: var(--icon-color-hover);
    }
  }

  @include respond-to('<=pad') {
    right: 2px;
  }
}
.o_textarea-clearable {
  @include hover {
    .o_textarea-suffix-icon {
      visibility: hidden;
      opacity: 0;
      transform: scale(0.5);
    }
    .o_textarea-clear {
      visibility: visible;
      opacity: 1;
      transform: scale(1);
    }
  }
  @include hoverable(none) {
    .o_textarea-suffix-icon,
    .o_textarea-clear {
      visibility: visible;
      opacity: 1;
    }
  }
}

.o_textarea-limit {
  .o_textarea-textarea {
    // 兼容max()
    padding-bottom: var(--limit-text-height);
    padding-bottom: max(var(--limit-text-height), var(--padding-v));
  }
}

.o_textarea-count {
  right: 7px;
  bottom: 3px;
  color: var(--limit-color);
  font-size: var(--limit-text-size);
  line-height: var(--limit-text-height);
  background-color: var(--limit-bg-color);
  z-index: 0;
  b {
    font-weight: normal;
  }
}
.o_textarea-count-error > span > b {
  color: var(--limit-color-error);
}

.o_textarea-icon {
  position: absolute;
}

/* auto size */
.o_textarea-auto-size {
  height: auto;
  width: auto;
}
.o_textarea-wrap-auto-size {
  position: relative;
  min-width: 0; /* 修复子元素超出父元素问题 */
  min-height: 0;
  flex: 1;

  &::after {
    content: attr(date-value) ' ';
    padding: var(--padding-v) var(--padding-h);
    visibility: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    height: 100%;
    width: 100%;
    line-height: inherit;
    display: block;
    box-sizing: border-box;
    min-height: var(--min-height, 10px);
    min-width: var(--min-width, 10px);
  }
  .o_textarea-textarea {
    position: absolute;
    top: 0;
    left: 0;
  }
}