// Link Focus
//
//  - Do not set your site's link focus to `outline: none`. Never. Ever.
//  - If you have multiple form fields on your site or you see the dreaded `outline: none` in your base code, you can reset the browser defaults by adding the code:
//  <pre>
//  a:focus {
//    outline: auto 2px Highlight; // for non-webkit browsers
//    outline: auto 5px -webkit-focus-ring-color; // for webkit browsers
//  }</pre>
//  - Of course you can create your own focus styles to match your theme or to make the default browser styles more prominent, just make sure they are visible by tabbing and obvious to your users.
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#focus_guide">WCAG 2.1 Guidelines</a></h3><div id="focus_guide" class="atblock__panel guidelines"><p><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#navigation-mechanisms-focus-visible" target="_blank">2.4.7 Focus Visible</a> - Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)</p></div><div class="markup"></div></section>
//
//
//
// Markup: link-focus.twig
//
// Style guide: General.link-focus

// Import site utilities.
@import '../../global/utils/init';

a:focus,
.button-icon:focus {
  outline: auto 2px Highlight; // for non-webkit browsers
  outline: auto 5px -webkit-focus-ring-color; // sass-lint:disable-line no-vendor-prefixes no-duplicate-properties
}
