@import '../../variables.scss';

#{$biz-css-prefix}-textarea {
  position: relative;
  width: 100%;
  padding-top: 4px;
  padding-bottom: 3px;
  padding-left: 0px;
  padding-right: 10px;
  border-bottom: 1px solid var(--color-gray-30);
  font-size: 16px;

  .area-content {
    flex-grow: 1;
  }

  .area-part {
    display: flex;
  }

  .inner-textarea {
    width: 100%;
    resize: none;
    padding-top: 0;
    color: var(--color-gray-90);
    background: transparent;
    border: none;
    font-size: 14px;
    vertical-align: 0px;
    outline: none;

    &:disabled {
      color: var(--color-gray-50);
      background: transparent;
    }
  }

  .inner-label {
    margin-right: 20px;
    text-align: right;
    min-width: 60px;
  }

  .required-title {
    color: var(--color-error-50);
    margin: 3px 1px;
  }

  &.au-textarea-separate {
    display: block;
    .inner-label {
      display: block;
      margin-bottom: 8px;
    }
    .area-part {
      display: block;
    }
    .area-content {
      width: 100%;
    }
    .inner-textarea {
      display: block;
      margin-bottom: 2px;
    }
  }

  &.au-textarea-left {
    .inner-textarea {
      text-align: left;
    }
  }

  &.au-textarea-center {
    .inner-textarea {
      text-align: center;
    }
  }

  &.au-textarea-right {
    .inner-textarea {
      text-align: right;
    }
  }

  &-error {
    .inner-textarea {
      color: var(--color-error-50);
    }
    .icon-exclamation-circle {
      font-size: 18px;
      position: absolute;
      right: 10px;
      top: 13px;
      color: var(--color-error-50);
    }
    &.au-textarea-separate {
      .icon-exclamation-circle {
        top: 48px;
      }
    }
  }

  .limit-number {
    height: 20px;

    .active-num {
      color: var(--color-gray-90);
    }
  }

  .limit-part {
    float: right;
    font-size: 14px;
    color: var(--color-gray-40);

    &.disabled-num {
      color: var(--color-gray-40);

      .active-num {
        color: var(--color-gray-40);
      }
    }
  }
}

textarea::-webkit-input-placeholder {
  color: var(--color-gray-40);
}