@use "../../base";

/// @access private
@mixin styles {
  .govuk-character-count {
    @include base.govuk-responsive-margin(6, "bottom");

    .govuk-form-group,
    .govuk-textarea {
      margin-bottom: base.govuk-spacing(1);
    }

    // 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.
    .govuk-textarea--error:focus {
      border-color: base.govuk-functional-colour(error);
      box-shadow: inset 0 0 0 base.$govuk-border-width-form-element base.govuk-functional-colour(error);
    }
  }

  .govuk-character-count__message {
    @include base.govuk-font-tabular-numbers;
    margin-top: 0;
    margin-bottom: 0;

    &::after {
      // Zero-width space that will reserve vertical space when no hint is
      // provided as:
      // - setting a min-height is not possible without a magic number because
      //   the line-height is set by the `govuk-font` call above
      // - using `:empty` is not possible as the hint macro outputs line breaks
      content: "\200B";
    }
  }

  .govuk-character-count__message--disabled {
    visibility: hidden;
  }
}