@mixin focusOutline($color: red, $focus-width: 3px) {
  outline: #{$focus-width} solid var(--a11y-focus-color, #{$color});
  outline-offset: $focus-width * -1;
}

@mixin focusOutlineAndResetHover($color: red) {
  &:focus-visible {
    @include focusOutline($color);
    @content;
  }

  @media(hover: hover) {
    &:hover, &:active {
      outline: none;
      @content;
    }
  }
}

@mixin removeColor {
  filter: grayscale(100%) !important;
}


@mixin motion-safe {
  @media (prefers-reduced-motion: no-preference) {
    @content;
  }
}

// CSS image replacement
@mixin text-hide($ignore-warning: false) {
  // stylelint-disable-next-line font-family-no-missing-generic-family-keyword
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

@mixin high-contrast($preference: more) {
  @media (prefers-contrast: #{$preference}) {
    @content;
  }
}

@mixin forced-color {
  @media screen and (forced-colors: active) {
    @content;
  }

  @media (-ms-high-contrast: active) {
    @content;
  }
}