Avatar focus without pseudo element

1 files changed, 5 insertions, 20 deletions

diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index e80fc1a..4be780e 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -69,7 +69,7 @@
 
             --key-focus: (
                 --border: fn.global-color(--focus --fill),
-                --shadow: fn.global-color(--focus --shadow),
+                --shadow: 0 0 0 calc(2px + fn.global-dim(--focus --outline-width)) fn.global-color(--accent --primary --quiet --obj-lo),
             ),
         ),
     ), 'colors');
@@ -77,22 +77,11 @@
     @include iro.bem-object(iro.props-namespace()) {
         display:        inline-block;
         position:       relative;
+        border-radius:  fn.dim(--rounding);
         font-size:      fn.dim(--100 --font-size);
         font-style:     normal;
         vertical-align: .05em;
 
-        &::after {
-            content:       '';
-            display:       block;
-            position:      absolute;
-            top:           0;
-            right:         0;
-            bottom:        0;
-            left:          0;
-            border:        2px solid transparent;
-            border-radius: fn.dim(--rounding);
-        }
-
         @include iro.bem-elem('status') {
             position: absolute;
             right:    0;
@@ -113,9 +102,7 @@
         }
 
         @include iro.bem-modifier('circle') {
-            &::after {
-                border-radius: 100%;
-            }
+            border-radius: 100%;
 
             @include iro.bem-elem('content') {
                 border-radius: 100%;
@@ -151,10 +138,8 @@
     
         @include iro.bem-at-theme('keyboard') {
             &:focus {
-                &::after {
-                    border-color: fn.color(--key-focus --border);
-                    box-shadow:   fn.color(--key-focus --shadow);
-                }
+                outline:    2px solid fn.color(--key-focus --border);
+                box-shadow: fn.color(--key-focus --shadow);
             }
         }
     }