@import "../settings.colors";

@import "tools.mixins";

// NOTE: We could use "box-shadow" instead of "outline", but focus rings
// won't display correctly when an <a> wraps an <img> element, unless that
// <a> has "display: inline-block" applied. "box-shadow" is nice because it
// automatically follows the contours of the element's "border-radius",
// whereas "outline" does not (although there are plans to change this:
// https://bugs.chromium.org/p/chromium/issues/detail?id=81556), but we've
// opted to use "outline" in order to avoid having to apply
// "display: inline-block" to every <a> that wraps an <img>.

// NOTE: When the global focus outline is implemented in IE11, elements such
// as <body> and <fieldset> receive focus and are subsequently outlined when
// clicked, even when they have tabindex="-1". Because we haven't been able
// to find a fix for this, we've chosen to exclude IE11 and only apply the
// global focus outline to modern browsers.

@mixin focus-outline {
  @include modern-browsers {
    // Purposely using pixels instead of rems
    outline: 2px solid $color-focus;
    outline-offset: 0;
  }
}

@mixin focus-outline-inverted {
  @include modern-browsers {
    // Purposely using pixels instead of rems
    outline: 2px solid $color-focus-inverted;
    outline-offset: 0;
  }
}
