@use "../../core/settings" as *;
@use "../../core/tools" as *;

////
/// Hint component
///
/// @group components/hint
////

@include nhsuk-exports("nhsuk/components/hint") {
  .nhsuk-hint {
    margin-bottom: nhsuk-spacing(3);
    color: $nhsuk-secondary-text-colour;

    @include nhsuk-font($size: 19);
  }

  // Reduces margin-bottom of hint when used after the default label (no class)
  // or nhsuk-label--s for better vertical alignment.

  // This adjustment will not work in browsers that do not support :not().
  // Users with these browsers will see the default size margin (5px larger).

  .nhsuk-label:not(.nhsuk-label--m):not(.nhsuk-label--l):not(.nhsuk-label--xl) + .nhsuk-hint {
    margin-bottom: nhsuk-spacing(2);
  }

  .nhsuk-label-wrapper:has(.nhsuk-label:not(.nhsuk-label--m):not(.nhsuk-label--l):not(.nhsuk-label--xl)) + .nhsuk-hint {
    margin-bottom: nhsuk-spacing(2);
  }

  // Reduces margin-bottom of hint when used after the default legend (no class)
  // or nhsuk-fieldset__legend--s for better vertical alignment.

  // This adjustment will not work in browsers that do not support :not().
  // Users with these browsers will see the default size margin (5px larger).

  // prettier-ignore
  .nhsuk-fieldset__legend:not(.nhsuk-fieldset__legend--m):not(.nhsuk-fieldset__legend--l):not(.nhsuk-fieldset__legend--xl) + .nhsuk-hint {
    margin-bottom: nhsuk-spacing(2);
  }

  // Reduce top margin from subsequent error message or hint
  .nhsuk-label--xl,
  .nhsuk-label--l,
  .nhsuk-label--m,
  .nhsuk-label-wrapper:has(.nhsuk-label--xl),
  .nhsuk-label-wrapper:has(.nhsuk-label--l),
  .nhsuk-label-wrapper:has(.nhsuk-label--m),
  .nhsuk-fieldset__legend--xl,
  .nhsuk-fieldset__legend--l,
  .nhsuk-fieldset__legend--m {
    + .nhsuk-error-message,
    + .nhsuk-hint {
      margin-top: nhsuk-spacing(-1);
    }
  }
}