@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../styles/mixins.scss';

$class-prefix: 'cn-ui-m';
$sizes: small, medium, large;

.#{$hashClassName}.#{$class-prefix}-textarea {
  position: relative;
  top: 0;
  left: 0;

  box-sizing: border-box;
  padding: $m-s-12;

  color: $m-color-text;
  border-radius: $m-s-4;
  background-color: $m-color-bg-disabled;

  font-family: $m-font-family-base;

  &--read-only {
    padding: 0;

    background: transparent;
  }

  &--inverse {
    background-color: $m-color-bg-toast;
  }

  // 高亮
  &--highlighted {
    box-shadow: $m-shadow-card;
  }

  .#{$class-prefix}-textarea {
    // 左对齐
    &--right {
      text-align: right;
    }

    &--inverse &-wrapper {
      color: $m-color-bg-white;
    }

    &--inverse &-read-only-wrapper {
      color: $m-color-bg-white;
      background: transparent;
    }

    // textarea样式
    &-wrapper {
      display: block;

      box-sizing: border-box;
      width: 100%;
      max-height: 100%;
      padding: 0;

      resize: none;

      color: $m-color-text;
      border: none;
      border: 0;
      background-color: transparent;

      font-size: $m-s-14;
      line-height: $m-font-lineheight-2;

      scrollbar-face-color: $m-color-bg;
      caret-color: $m-color-primary;
      appearance: none;
      // 清除点击时的灰色背景
      -webkit-tap-highlight-color: transparent;

      &::placeholder {
        color: $m-color-text-tip;
      }

      &:focus {
        border: 0;
        outline: none;
        background-color: transparent;
      }

      &:focus-visible {
        border: 0;
        outline: none;
        background-color: transparent;
      }

      &:focus-within {
        border: 0;
        outline: none;
        background-color: transparent;
      }

      &:disabled {
        color: $m-color-text-disabled;
        border: none;
        outline: none;
        background-color: transparent;

        &::placeholder {
          color: inherit;
        }
      }
    }

    // 字数限制
    &-length-tips {
      width: 100%;
      text-align: right;
      color: $m-color-text-tip;
      font-family: $m-font-family-base;
      font-size: $m-s-12;
      line-height: $m-font-lineheight-1;
    }

    // 只读样式
    &-read-only-wrapper {
      color: $m-color-text;
      background: transparent;

      font-size: $m-s-14;
      line-height: $m-font-lineheight-2;
    }

    //只读
    &-readonly-div {
      p {
        margin: 0px;
      }
    }
  }
}