_a11y.scss

/* ==========================================================================
    tools.a11y
    Helpers to create more accessible sites
/ =========================================================================== */

/* --------------------------------------------------------------------------
    Visually-hidden
    Hides an element visually while still allowing the content to be accessible
    to assistive technology, e.g. screen readers.
    Usage: @include visually-hidden();
/ --------------------------------------------------------------------------- */

@mixin visually-hidden {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  block-size: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  inline-size: 1px !important;
}