Add focus ring with `outline` property when `:focus-visible` pseudo-class detected

[czerkies]

• https://drafts.csswg.org/css-ui/#outline
• https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html
• https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/

[czerkies]

Ensure that focused controls are given highly visible focus indicators.

The appearance of the focus indicator is up to you as the web author, but it must be perceivable. If you stick to a solid design that is undisputedly clear, you might save yourself a headache trying to interpret multiple WCAG criteria around this. In other words, do not implement a light border that cannot be easily distinguished against the control it surrounds

https://www.tpgi.com/how-to-avoid-breaking-web-pages-for-keyboard-users/

[czerkies]

Give responsibility of @media (any-hover: hover) query of transition custom properties to nav component.