app-avatar{display:contents}app-avatar .avatar-wrap{flex-shrink:0;display:inline-grid;position:relative}app-avatar .avatar-wrap__dot{border:2px solid var(--bg-card);background:var(--color-success);border-radius:50%;width:12px;height:12px;position:absolute;bottom:0;right:0}app-avatar .avatar{background:var(--primary-gradient);color:#fff;width:44px;height:44px;font-size:var(--font-base);-webkit-user-select:none;user-select:none;border-radius:50%;flex-shrink:0;place-items:center;font-weight:700;display:grid;position:relative;overflow:hidden}app-avatar .avatar--sm{width:34px;height:34px;font-size:var(--font-sm)}app-avatar .avatar--lg{width:60px;height:60px;font-size:var(--font-xl)}app-avatar .avatar--xl{width:88px;height:88px;font-size:28px}app-avatar .avatar.is-muted{color:var(--text-muted)}app-avatar .face{-webkit-user-select:none;user-select:none;border-radius:50%;flex-shrink:0;place-items:center;width:26px;max-width:26px;height:26px;max-height:26px;font-size:10px;font-weight:700;display:grid;position:relative;overflow:hidden}app-avatar .face--lg{width:36px;max-width:36px;height:36px;max-height:36px;font-size:var(--font-xs)}app-avatar .avatar-img{object-fit:cover;width:100%;height:100%;transition:opacity .15s;display:block}app-avatar .is-loading .avatar-img{opacity:0}