$focus-size: 2px;

@mixin focus-default-values($color: null) {
  outline: $focus-size solid $color;
  outline-offset: -2px;
}

@mixin state-focus-default($color: null) {
  &:focus,
  &.is-focused,
  &:focus-visible {
    @include focus-default-values($color);
    @content;
  }

  /* Reset focus styles for browsers supporting :focus visible:
     https://www.tpgi.com/focus-visible-and-backwards-compatibility/
     (is-focused is not reset, because it must be set explicitely in desired situations)
  */
  &:focus:not(:focus-visible) {
    outline: none;
    outline-offset: 0;
  }
}