When :focus-visible, add the two-tone focus ring.

Hides default focus ring from elements that are tagged as having a custom focus ring.

A two-tone focus ring that will be visually apparent for any background/element combination.

NOTE: use boxShadows instead if your focusable element:

• already has a box shadow
• has an explicit border radius set

Prefer styles over tightStyles, except in cases where line spacing/font size will otherwise cause obscured content.

focus
    [ FocusRing.boxShadows [ "inset 0 3px 0 0 " ++ ColorsExtra.toCssString glacier ]
    , Css.outline3 (Css.px 2) Css.solid Css.transparent
    ]

Please be sure that the padding on the element you add this style too is sufficient (at least 6px on all sides) that the inset box shadow won't cover any content.

focus
    [ FocusRing.insetBoxShadows [ "inset 0 3px 0 0 " ++ ColorsExtra.toCssString glacier ]
    , Css.outline3 (Css.px 2) Css.solid Css.transparent
    ]

In special cases, we don't use a two-tone focus ring.

Be very sure this is what you need before using this!

In special cases, we don't use a two-tone focus ring, and an outset focus ring would be obscured.

Be very sure this is what you need before using this!

Add this class to remove global focus styles. Only do this if you'll be adding the two-tone focus ring styles another way.