Update

1 files changed, 24 insertions, 12 deletions

diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index cc7e500..06261b8 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -45,13 +45,9 @@ $static-themes: 'black' 'white' !default;
     }
 
     @if string.slice($theme, 1, 7) == 'static-' {
-        &:link,
-        &:visited,
-        &:enabled {
-            &:focus-visible {
-                outline:    fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border);
-                box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline);
-            }
+        &::after {
+            outline:    fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border);
+            box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline);
         }
     }
 }
@@ -190,11 +186,10 @@ $static-themes: 'black' 'white' !default;
 
     @include iro.bem-object(iro.props-namespace()) {
         display:          inline-block;
-        margin:           calc(-1 * fn.dim(--key-focus --border));
+        position:         relative;
         padding-block:    fn.dim(--pad-b);
         padding-inline:   fn.dim(--pad-i);
-        border:           fn.dim(--key-focus --border) solid transparent;
-        border-radius:    calc(fn.dim(--rounding) + fn.dim(--key-focus --border));
+        border-radius:    fn.dim(--rounding);
         background-color: fn.color(--bg);
         background-clip:  padding-box;
         color:            fn.color(--label);
@@ -203,6 +198,18 @@ $static-themes: 'black' 'white' !default;
         text-align:       center;
         text-decoration:  none;
 
+        &::after {
+            content:        '';
+            display:        none;
+            position:       absolute;
+            z-index:        1;
+            inset:          calc(-1 * fn.dim(--key-focus --border-offset));
+            border-radius:  calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
+            outline:        fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+            box-shadow:     0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+            pointer-events: none;
+        }
+
         &:link,
         &:visited,
         &:enabled {
@@ -244,8 +251,9 @@ $static-themes: 'black' 'white' !default;
         &:visited,
         &:enabled {
             &:focus-visible {
-                outline:    fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
-                box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+                &::after {
+                    display: block;
+                }
             }
         }
     
@@ -258,6 +266,10 @@ $static-themes: 'black' 'white' !default;
         @include iro.bem-modifier('pill') {
             padding-inline: fn.dim(--pad-i-pill);
             border-radius:  10em;
+
+            &::after {
+                border-radius: 10em;
+            }
         }
     
         @each $size in sm lg xl {