@use '../theme' as *;
@use '_high-contrast' as *;

@mixin outline($theme: 'light', $offset: 2px, $thickness: 2px) {
  outline: $thickness solid;
  @if ($theme == 'light') {
    outline-color: $theme-light-border-color-focus;
  } @else {
    outline-color: $theme-dark-border-color-focus;
  }
  outline-offset: $offset;

  @include high-contrast-media-query {
    forced-color-adjust: auto;
    outline-color: Highlight;
  }
}


@mixin focus($theme: 'light', $offset: 2px, $thickness: 2px) {
  &:focus {
    @include outline($theme, $offset, $thickness);
  }
  @supports selector(:focus-visible) {
    &:focus {
      
      outline: revert;
      outline-offset: revert;
    }
    &:focus-visible {
      
      @include outline($theme, $offset, $thickness);
    }
  }
}


@mixin focus-pseudo($theme: 'light', $offset: 2px, $thickness: 2px) {
  
  &:focus,
  &:focus-visible {
    outline: none;
  }

  &:focus::before {
    @include outline($theme, $offset, $thickness);
  }

  @supports selector(:focus-visible) {
    &:focus::before {
      
      outline: revert;
      outline-offset: revert;
    }
    &:focus-visible::before {
      
      @include outline($theme, $offset, $thickness);
    }
  }
}