////
/// @group helpers
////

/// Hide an element visually, but have it available for screen readers
///
/// @link https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
///   - Hiding Content for Accessibility, Jonathan Snook, February 2011
/// @link https://github.com/h5bp/html5-boilerplate/blob/9f13695d21ff92c55c78dfa9f16bb02a1b6e911f/src/css/main.css#L121-L158
///   - h5bp/html5-boilerplate - Thanks!
///
/// @param {Boolean} $important [true] - Whether to mark as `!important`
///
/// @access public

@mixin govuk-visually-hidden($important: true) {
  position: absolute iff($important, !important);

  width: 1px iff($important, !important);
  height: 1px iff($important, !important);
  // If margin is set to a negative value it can cause text to be announced in
  // the wrong order in VoiceOver for OSX
  margin: 0 iff($important, !important);
  padding: 0 iff($important, !important);

  overflow: hidden iff($important, !important);
  clip: rect(0 0 0 0) iff($important, !important);
  -webkit-clip-path: inset(50%) iff($important, !important);
          clip-path: inset(50%) iff($important, !important);

  border: 0 iff($important, !important);

  // For long content, line feeds are not interpreted as spaces and small width
  // causes content to wrap 1 word per line:
  // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
  white-space: nowrap iff($important, !important);
}

/// Hide an element visually, but have it available for screen readers whilst
/// allowing the element to be focused when navigated to via the keyboard (e.g.
/// for the skip link)
///
/// This is slightly less opinionated about borders and padding to make it
/// easier to style the focussed element.
///
/// @param {Boolean} $important [true] - Whether to mark as `!important`
///
/// @access public

@mixin govuk-visually-hidden-focusable($important: true) {
  position: absolute iff($important, !important);

  width: 1px iff($important, !important);
  height: 1px iff($important, !important);
  // If margin is set to a negative value it can cause text to be announced in
  // the wrong order in VoiceOver for OSX
  margin: 0 iff($important, !important);

  overflow: hidden iff($important, !important);
  clip: rect(0 0 0 0) iff($important, !important);
  -webkit-clip-path: inset(50%) iff($important, !important);
          clip-path: inset(50%) iff($important, !important);

  // For long content, line feeds are not interpreted as spaces and small width
  // causes content to wrap 1 word per line:
  // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
  white-space: nowrap iff($important, !important);

  &:active,
  &:focus {
    position: static iff($important, !important);

    width: auto iff($important, !important);
    height: auto iff($important, !important);
    margin: inherit iff($important, !important);

    overflow: visible iff($important, !important);
    clip: auto iff($important, !important);
    -webkit-clip-path: none iff($important, !important);
            clip-path: none iff($important, !important);

    white-space: inherit iff($important, !important);
  }
}