@use "component-state/form";

.pix-textarea {
  display: flex;
  flex-direction: column;
  height: 100%;

  &__container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
}

.pix-textarea-container {
  &__input {
    @extend %pix-form-element-state;

    flex-grow: 1;
    width: 100%;
    padding: 10px var(--pix-spacing-4x);
    color: var(--pix-neutral-900);
    font-size: 0.875rem;
    border: 1px solid var(--pix-neutral-500);
    border-style: solid;
    border-radius: var(--pix-spacing-1x);
    resize: vertical;

    &.pix-textarea--error {
      @extend %pix-form-error-state;
    }
  }

  &__text-length-indicator {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 6px;
    margin-bottom: 0;
    color: var(--pix-neutral-500);
    font-size: 12px;
  }

  &__error-message {
    @extend %pix-input-error-message;
  }
}