1 files changed, 10 insertions, 1 deletions

diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index fc4ffcd..81396e3 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -11,7 +11,7 @@
         inline-size: props.get($indicator-size);
         block-size:  props.get($indicator-size);
 
-        @include bem.next-elem('content') {
+        @include bem.sibling-elem('content') {
             mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at
             calc(100% - .5 * props.get($indicator-size))
             calc(100% - .5 * props.get($indicator-size)),
@@ -94,6 +94,15 @@
             }
         }
 
+        @include bem.modifier('colored-gradient') {
+            @include bem.elem('content') {
+                color:      #fff;
+                background: linear-gradient(props.get(vars.$bg-angle),
+                hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)),
+                hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l)));
+            }
+        }
+
         @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
             @include bem.modifier($mod) {
                 font-size: props.get($font-size);