@use "components/form/input/mixins";
@use "system/typography";
@use "system/spacing";
@use "system/visibility";
@use "system/colors";
@use "system/states";

.ods-textarea {
  @include mixins.form-states;

  &::placeholder {
    color: inherit;
  }

  &__required {
    @extend %ods-margin-top-1;

    padding: 0;
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-light;

    &::before {
      content: "* ";
    }

    &--optional::before {
      content: none;
    }
  }

  &__label {
    @include mixins.form-label;
  }

  &__textarea {
    @include mixins.form-component;
    @extend %ods-margin-top-2;

    resize: none;

    &:focus-visible {
      outline: 0.25rem solid colors.$purple-light;
    }
  }

  &--focus &__textarea {
    outline: 0.25rem solid colors.$purple-light;
  }

  &__countdown-characters {
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-light;
    @extend %ods-block;
    @extend %ods-text--align-right;
  }

  &__error-message {
    @include mixins.error-message;
  }
}