.avatar{
   align-items: center;
   border-radius: 50%;
   display: inline-flex;
   justify-content: center;
   position: relative;
   text-align: center;
   vertical-align: middle;
   overflow: hidden;
   font-weight: 700;
}

.md{
   height: calc( 46px + var(--height) );
   width: calc( 46px + var(--height) );
   line-height: 1.1;
   font-size: 1.1rem;

}

.sm{
   height: 32px;
   width: 32px;
   line-height: 0.8;
   font-size: 0.8rem;
}

.lg{
   height: 60px;
   width: 60px;
   line-height: 1.6;
   font-size: 1.6rem;
}

img{
   border-radius: inherit;
   display: inline-flex;
   height: inherit;
   width: inherit;
}

$colors: (
    'blue': $blue,
    'green': $green,
    'red': $red,
    'yellow': $yellow,
);


@each $index, $color in $colors {
   .color-#{$index}-fill {
      @include avatarLum('fill', $color);
   }

   .color-#{$index}-line {
      @include avatarLum('line', $color);
   }
}