// Hide only visually, but have it available for screenreaders: h5bp.com/v
//
@mixin visually-hidden($focusable: false) {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  // Extends the `visually-hidden` class to allow the element to be focusable
  // when navigated to via the keyboard: h5bp.com/p
  @if $focusable == true {
    &:active,
    &:focus {
      clip: auto !important;
      height: auto !important;
      margin: 0 !important;
      overflow: visible !important;
      position: static !important;
      width: auto !important;
    }
  }
}

.visually-hidden,
.visuallyhidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}