@import "./form";

.cobalt- {
  &TextAreaField {
    $self: &;

    @include form-field-container;

    position: relative;

    &__Input {
      @include form-input-base($self);

      min-height: 88px;

      width: 100%;

      vertical-align: top;

      resize: vertical;

      &::placeholder {
        @apply c-text-onSurfaceVariant;
        opacity: 0.7;
      }
    }

    &__Input[disabled] {
      &::placeholder {
        opacity: 0.35;
      }
    }

    &__RemainingChars {
      @apply c-text-onSurfaceVariant;

      position: absolute;

      @apply c-bottom-xs;

      width: 100%;

      padding: 0 12px;

      font-size: 13px;
      line-height: 24px;
      text-align: right;

      animation-name: cobalt-TextAreaField--fade-in;
      animation-duration: 150ms;

      pointer-events: none;
    }

    &--withLimit {
      #{ $self }__Input {
        padding-bottom: 36px;
      }
    }
  }
}

@keyframes cobalt-TextAreaField--fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}