@import 'common/variable.scss';
@import 'common/mixins.scss';
.#{$--css-prefix}{
  &textarea{
    &--wrapper{
      @include disabled;
      position:relative;
      background:#fff;
      display: block;
      &:before,&:after{
        @include divider;
        position:absolute;
        bottom:-1px;
        width:100%;
        height:1px;
        content:'';
        z-index:1;
        left:0;
        background-color:transparent;
      }
      &:after{
        @include divider($--color-primary);
        transition:width 0.4s $--ease-in-out;
        width:0;
        z-index:2;
      }
      &.is-focus:after{
        width:100%;
      }
    }
    &--inner{
      position:relative;
      @include var-height();
      @include var-height($--box-size-height-default, 'min-height');
      line-height: 0.32rem;
      textarea,.#{$--css-prefix}textarea--shadow{
        padding:0.26rem 0.15rem;
        width:100%;
        text-align: inherit;
        font-size: inherit;
        line-height: inherit;
        font-family: inherit;
        box-sizing:border-box;
        min-height:inherit;
        color:inherit;
        word-break: break-all;
      }
      textarea{
        height:100%;
        resize: none;
        border:0;
        outline: none;
        overflow: hidden;
        vertical-align: middle;
        background:transparent;
        position:relative;
        z-index:1;
      }
    }
    &--shadow{
      position:absolute;
      left:0;
      top:0;
      opacity:0;
    }
    
    &--enter-number{
      .#{$--css-prefix}textarea-inner{
        padding-bottom:0.2rem;
      }
      span{
        position:absolute;
        right: 0.1rem;
        bottom: 0.1rem;
        font-style:normal;
        @include var-font-size($--font-size-small);
        line-height:1;
        padding:0;
        @include var-color($--color-light);
      }
    }
  }
}