@use './colors';

$outline: colors.$focus 3px solid !default;
$outline-offset: 3px !default;
$outline-offset-inset: -3px !default;

@mixin ie-only {
  @media screen and ( -ms-high-contrast: none ) {
    @content;
  }
}

@mixin focus-outline {
  outline: $outline;
  outline-offset: $outline-offset;
}

@mixin focus-outline-inset {
  @supports ( outline-offset: $outline-offset-inset ) {
    @include focus-outline;
    outline-offset: $outline-offset-inset;
  }

  /* IE does not support outline-offset */
  @include ie-only {
    border: $outline;
  }
}