1 files changed, 26 insertions, 2 deletions

diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 9be249f..da7fdbd 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -66,6 +66,18 @@
         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;
@@ -91,6 +103,10 @@
         }
 
         @include iro.bem-modifier('circle') {
+            &::after {
+                border-radius: 100%;
+            }
+
             @include iro.bem-elem('content') {
                 border-radius: 100%;
             }
@@ -102,6 +118,12 @@
             }
         }
 
+        @include iro.bem-modifier('colored') {
+            @include iro.bem-elem('content') {
+                background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l));
+            }
+        }
+
         @each $size in 50 75 150 {
             @include iro.bem-modifier($size) {
                 font-size: fn.dim(--#{$size} --font-size);
@@ -118,8 +140,10 @@
     
         @include iro.bem-at-theme('keyboard') {
             &:focus {
-                border-color: fn.color(--key-focus --border);
-                box-shadow:   inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
+                &::after {
+                    border-color: fn.color(--key-focus --border);
+                    box-shadow:   fn.color(--key-focus --shadow);
+                }
             }
         }
     }