From a1870a62f262dad9affcfebec1e07168c022ae5d Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Thu, 26 Jan 2023 15:23:52 +0100
Subject: Avatar

---
 src/objects/_avatar.scss | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

(limited to 'src/objects')

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);
+                }
             }
         }
     }
-- 
cgit v1.2.3-54-g00ecf