// In Amsterdam, focus rings default to the browser's `outline`
// However, some components need to be forced to have the same behavior
// This re-uses the same faux focus ring mixin, but adjusts the outline instead
// @param {size} Old param from default theme that won't be used, so it should always be `null`
// @param {offset} Accepts a specific number or 'inner' or 'outer' to adjust outline position
// @param {includeFocusVisible} Allows turning off :not:focus-visible selector (which can interfere with some manual usages)
@mixin euiFocusRing($size: null, $offset: false, $focusVisibleSelectors: true) {
  // Safari & Firefox
  outline: $euiFocusRingSize solid currentColor;

  @if ($focusVisibleSelectors) {
    // Chrome
    &:focus-visible {
      outline-style: auto;
    }

    &:not(:focus-visible) {
      outline: none;
    }
  } @else {
    outline-style: auto;
  }

  // Adjusting position with offset
  @if (type-of($offset) == number) {
    @if (unitless($offset)) {
      outline-offset: #{$offset}px;
    } @else {
      outline-offset: #{$offset};
    }
  } @else if ($offset == 'inner') {
    outline-offset: -$euiFocusRingSize;
  } @else if ($offset == 'outer') {
    outline-offset: $euiFocusRingSize;
  }
}

// Amsterdam uses transparency instead of shading/tinting
@mixin euiFocusBackground($color: $euiColorPrimary) {
  background-color: transparentize($color, $euiFocusTransparency);
}