:root{--m-avatar-large:50px;--m-avatar-default:40px;--m-avatar-small:24px}.m-avatar{--m-avatar-size:var(--m-avatar-default);--m-avatar-w:var(--m-avatar-size);--m-image-size:var(--m-avatar-size);width:var(--m-avatar-w);height:var(--m-avatar-size);--m-image-m-t:0;--m-image-m-l:0;grid-template-areas:"avatar";display:inline-grid}.m-avatar.m-avatar-large{--m-avatar-size:var(--m-avatar-large)}.m-avatar.m-avatar-small{--m-avatar-size:var(--m-avatar-small)}.m-avatar .m-avatar-mask{width:var(--m-avatar-w);height:var(--m-avatar-size);grid-area:avatar}.m-avatar>img{width:var(--m-image-size);height:var(--m-image-size);margin:var(--m-image-m-t)0 0 var(--m-image-m-l);grid-area:avatar}.m-avatar-circle{--m-avatar-w:calc(var(--m-avatar-size)/43*54);--m-image-size:calc(var(--m-avatar-size)/54*45);--m-image-m-t:calc(var(--m-avatar-w)/54*3);--m-image-m-l:calc(var(--m-avatar-w)/54*9)}.m-avatar-circle>img{margin:var(--m-image-m-t)0 0 var(--m-image-m-l);border-radius:50%}.m-avatar-square{--m-image-size:calc(var(--m-avatar-size)/49*45);--m-image-m-t:calc(var(--m-avatar-w)/52*2);--m-image-m-l:calc(var(--m-avatar-w)/52*2)}