@import 'custom-theme-variables';

@mixin focusOutline($color: $a11y-focus-color) {
  outline: 3px solid rgba($a11y-focus-color, 0.2);
  outline-offset: 0;
}


@mixin focusOutlineAndResetHover($color: $a11y-focus-color) {
  
  &:focus {
    @include focusOutline($color);
  }
  
  @media(hover: hover) {
    &:hover, &:active {
      outline: none;
    } 
  }
}

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