/** Screenreader-only styles*/
@mixin sr-only-styles {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/**
* Mixin to add screenreader-only styles to an elements non-focusable children
*/
@mixin sr-only-children {
  // These selectors ensure that we don't hide focusable elements
  :not(:focus):not(:active):not(:hover) {
    @include sr-only-styles();
  }
}

/**
* Mixin to add sr-only styles to a non-focusable element
*/
@mixin sr-only {
  // These selectors ensure that we don't hide focusable elements
  &:not(:focus):not(:active) {
    @include sr-only-styles();
  }
}

/** Focus styles **/

@mixin universal-focus($outline: black, $box-shadow: white) {
  outline: .125rem solid $outline;
  box-shadow: 0 0 0 .25rem $box-shadow;
}

@mixin element-focus-styles($outline: black, $box-shadow: white) {
  &:focus-visible {
    @include universal-focus($outline, $box-shadow);
    @content;
  }
}

@mixin global-focus-styles($outline: black, $box-shadow: white) {
  :focus-visible,
  button:focus-visible,
  [type="button"]:focus-visible,
  [type="reset"]:focus-visible,
  [type="submit"]:focus-visible {
    @include universal-focus($outline, $box-shadow);
    @content;
  }
}