avatars

scss/ui/_avatars.scss

@@ -18,6 +18,14 @@
     font-size: 1.25em;
   }
 
+  .badge {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    border-radius: 50%;
+    box-shadow: 0 0 0 2px white;
+  }
+
   @at-root a#{&} {
     cursor: pointer;
   }
@@ -32,16 +40,7 @@
   }
 }
 
-.avatar-status {
-  position: absolute;
-  right: -2px;
-  bottom: -2px;
-  width: .75rem;
-  height: .75rem;
-  background: #98a9bc;
-  border: 2px solid #fff;
-  border-radius: 50%;
-}
+
 
 .avatar-list {
   padding: 0;

scss/ui/_badges.scss

@@ -32,3 +32,7 @@
   background-color: transparent;
   border: 1px solid currentColor;
 }
+
+.badge-pill {
+  border-radius: 100px;
+}