// scss-lint:disable ImportantRule

// visually-hidden()
//
// Make an element visually hidden, but accessible to screen readers, etc.
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

@mixin visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  @if support-legacy-browser(ie, '7') {
    clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
  }
  clip: rect(1px, 1px, 1px, 1px);
}

// visually-hidden--off()
//
// Turns off the visually-hidden effect.

@mixin visually-hidden--off {
  position: static !important;
  clip: auto;
  height: auto;
  width: auto;
  overflow: auto;
}

// visually-hidden--focusable()
//
// Makes an element visually hidden by default, but visible when receiving
// focus.

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

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