// sass-lint:disable no-important

// Visually hidden
//
// Make an element visually hidden, but accessible to screen readers, etc.
// @see: http://a11yproject.com/posts/how-to-hide-content <br />
// `@mixin visually-hidden`
//
// Weight: 7
//
// Style guide: sass.visually-hidden

@mixin visually-hidden {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal;
  margin: -1px;
  padding: 0;
  clip: rect(0,0,0,0);
  border: 0;
}

// Visually-hidden--off
//
// Turns off the visually-hidden effect. <br />
// `@mixin visually-hidden--off`
//
// Weight: 8
//
// Style guide: sass.visually-hidden--off

@mixin visually-hidden--off {
  position: static;
  clip: auto;
  height: auto;
  width: auto;
  overflow: visible;
  margin: 0;
}

// Visually-hidden--focusable
//
// Makes an element visually hidden by default, but visible when receiving
// focus.
//
// Use in conjunction with visually-hidden to only display content when it's focused.
// Useful for "Skip to main content" links;
// @see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
// Credit: HTML5 Boilerplate <br />
// `@mixin visually-hidden--focusable`
//
// Weight: 9
//
// Style guide: sass.visually-hidden--focusable

@mixin visually-hidden--focusable {
  @include visually-hidden;

  &:active,
  &:focus {
    @include visually-hidden--off;
  }
}
