| @import "mixins/mixins"; | 
| @import "common/var"; | 
|   | 
| @include b(avatar) { | 
|   display: inline-block; | 
|   box-sizing: border-box; | 
|   text-align: center; | 
|   overflow: hidden; | 
|   color: $--avatar-font-color; | 
|   background: $--avatar-background-color; | 
|   width: $--avatar-large-size; | 
|   height: $--avatar-large-size; | 
|   line-height: $--avatar-large-size; | 
|   font-size: $--avatar-text-font-size; | 
|   | 
|   >img { | 
|     display: block; | 
|     height: 100%; | 
|     vertical-align: middle; | 
|   } | 
|   | 
|   @include m(circle) { | 
|     border-radius: 50%; | 
|   } | 
|   | 
|   @include m(square) { | 
|     border-radius: $--avatar-border-radius; | 
|   } | 
|   | 
|   @include m(icon) { | 
|     font-size: $--avatar-icon-font-size; | 
|   } | 
|   | 
|   @include m(large) { | 
|     width: $--avatar-large-size; | 
|     height: $--avatar-large-size; | 
|     line-height: $--avatar-large-size; | 
|   } | 
|   | 
|   @include m(medium) { | 
|     width: $--avatar-medium-size; | 
|     height: $--avatar-medium-size; | 
|     line-height: $--avatar-medium-size; | 
|   } | 
|   | 
|   @include m(small) { | 
|     width: $--avatar-small-size; | 
|     height: $--avatar-small-size; | 
|     line-height: $--avatar-small-size; | 
|   } | 
| } |