////
/// @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!
///
/// @access public

@mixin govuk-visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;

  overflow: hidden;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);

  border: 0;

  // 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;
}

/// 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.
///
/// @access public

@mixin govuk-visually-hidden-focusable {
  position: absolute;

  width: 1px;
  height: 1px;
  margin: -1px;

  overflow: hidden;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);

  // 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;

  &:active,
  &:focus {
    position: static;

    width: auto;
    height: auto;
    margin: inherit;

    overflow: visible;
    clip: auto;
    -webkit-clip-path: none;
            clip-path: none;

    white-space: inherit;
  }
}