The :focus-visible pseudo-class [1] enables showing or suppressing focus
outlines depending on the input modality, eg. hiding focus outlines by
default but enabling them if the user is using a keyboard or otherwise
indicates to their browser that they need a focus indicator.

It is not widely available natively yet though. Add the "official" JS
polyfill for it and a mixin that uses it to suppress an element's
outline when the user agent deems it is not required (typically when
using mouse input).

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible