@import '../variables/default.scss';
@import '../mixins/index.scss';

$component: '.at-textarea';
$at-textarea-input-height: $at-textarea-font-size * 4;
$at-textarea-bg-color: $color-bg;

.at-list {
  #{$component} {
    @include hairline-bottom-relative($left: $spacing-h-lg);
  }
}

.at-textarea-vertical {
  .at-textarea {
    padding-top: 0;
  }

  .at-textarea__item {
    .at-list__item-extra {
      flex: none;
      width: auto;
    }
  }
}

#{$component} {
  padding: $spacing-h-lg;
  width: 100%;
  font-size: 0;
  // font-size: $at-textarea-font-size;
  line-height: $line-height-zh;
  border-radius: $border-radius-md;
  background-color: $at-textarea-bg-color;
  box-sizing: border-box;
  position: relative;

  &__overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: $zindex-form;

    &--hidden {
      display: none;
    }
  }

  &--disabled {
    opacity: $form-opacity-disabled;
  }

  &__item {
    padding-right: 0;

    &:active {
      background-color: $color-bg !important;
    }

    .at-list {
      &__item-content {
        flex: 1.6;
        margin-right: $spacing-h-md;
      }

      &__item-extra {
        flex: 5;
        text-align: left;

        .item-extra__info {
          display: block;

          #{$component} {
            padding: 0;

            &::after {
              display: none !important;
            }
          }
        }
      }
    }
  }

  &__textarea {
    font-family: Arial, Helvetica, sans-serif;
    color: $at-input-text-color;
    width: 100%;
    height: $at-textarea-input-height;
    font-size: $at-textarea-font-size;
    outline: none;
    resize: none;
    -webkit-appearance: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    border: 0;
    line-height: 48px;
    @include placeholder;

    &:disabled {
      background: transparent;
    }
  }

  &__counter {
    // padding-top: $spacing-v-sm;
    padding-top: 16px;
    width: 100%;
    color: #999;
    font-size: $at-textarea-tips-size;
    text-align: right;
    // line-height: $line-height-base;
    line-height: 48px;
  }

  &--h5,
  &--weapp {
    #{$component}__textarea {
      // line-height: $line-height-base;
      line-height: 48px;
    }
  }

  &--error {
    #{$component}__counter {
      color: $color-error;
    }
  }
}