@use "../../core/settings" as *;
@use "../../core/tools" as *;
@forward "../error-message";
@forward "../hint";
@forward "../label";
@forward "../textarea";

////
/// Character count component
///
/// @group components/character-count
////

@include nhsuk-exports("nhsuk/components/character-count") {
  .nhsuk-character-count {
    @include nhsuk-responsive-margin(5, "bottom");

    .nhsuk-form-group,
    .nhsuk-textarea {
      margin-bottom: 0;
    }

    // If the textarea enters the error state whilst the user is focused on it,
    // show the error state. This presents feedback to the user that the value
    // has become invalid without needing to see the counter.
    .nhsuk-textarea--error:focus {
      border-color: $nhsuk-error-colour;
      box-shadow: inset 0 0 0 $nhsuk-border-width-form-element $nhsuk-error-colour;
    }
  }

  .nhsuk-character-count__message,
  .nhsuk-character-count__status {
    margin-top: nhsuk-spacing(1);
    margin-bottom: 0;

    // Hide when no textarea description is provided, during initialisation,
    // or when optionally hidden until the configured threshold is reached
    &[hidden],
    .nhsuk-frontend-supported & {
      display: none;
    }

    // Show when initialisation is complete (unless already hidden)
    .nhsuk-frontend-supported [data-nhsuk-character-count-init] &:not([hidden]) {
      display: block;
    }
  }

  // Deprecated, to be removed in v11.0
  .nhsuk-character-count__status--disabled,
  .nhsuk-character-count__message--disabled {
    display: none;
  }
}