/// Hide an element only visually, while leaving it available for screen readers.
///
/// @param {Bool} $focusable [false] - If truthy, it will allow the element to
/// be focusable when navigated to via the keyboard.
///
/// @group Utilities
@mixin hide-visually($focusable: false) {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  white-space: nowrap;

  @if $focusable {
    &:focus,
    &:active {
      position: static;
      overflow: visible;
      clip: auto;
      clip-path: none;
      width: auto;
      height: auto;
      margin: 0;
      white-space: inherit;
    }
  }
}

/// Apply only the properties necessary to make an already visually hidden
/// element focusable.
///
/// @group Utilities
@mixin hide-visually-focusable {
  &:focus,
  &:active {
    position: static;
    overflow: visible;
    clip: auto;
    clip-path: none;
    width: auto;
    height: auto;
    margin: 0;
    white-space: inherit;
  }
}

/// Reverses the effects of the `hide-visually()` mixin.
///
/// @group Utilities
@mixin show-visually {
  position: static;
  overflow: visible;
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  white-space: normal;
}