Fix navbar focus rendering

1 files changed, 5 insertions, 3 deletions

diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
index d245e2e..59d4c51 100644
--- a/src/objects/_navbar.scss
+++ b/src/objects/_navbar.scss
@@ -25,14 +25,16 @@
             padding-inline:  props.get(vars.$item--pad-i);
             font-size:       props.get(vars.$item--font-size);
             color:           currentColor;
+            white-space:     nowrap;
             border-radius:   100em;
 
             &::after {
                 position:       absolute;
                 inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
-                z-index:        1;
-                display:        none;
+                z-index:        -10;
+                display:        block;
                 pointer-events: none;
+                visibility:     hidden;
                 content:        '';
                 border-radius:  100em;
                 outline:        props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width);
@@ -72,7 +74,7 @@
                 &:focus-visible {
                     @include bem.elem('item-content') {
                         &::after {
-                            display: block;
+                            visibility: visible;
                         }
                     }
                 }