.avatar{
  position:relative; flex-shrink:0; box-sizing:border-box; border-radius:9999px; overflow:hidden;
  background:var(--md-neutral-background-2-rest);
  border-style:solid; border-color:var(--md-neutral-stroke-on-color-rest);
  box-shadow:0 0 2px rgba(112,144,176,0.2), 0 4px 8px rgba(112,144,176,0.15);
  display:flex; align-items:center; justify-content:center;
}
.avatar-color{ position:absolute; border-radius:9999px; background:var(--md-brand-background-inverted-rest); }
.avatar-photo{ position:relative; width:100%; height:100%; object-fit:cover; }
.avatar-placeholder{ position:relative; color:var(--md-neutral-foreground-3-rest); }

.avatar-medium{ width:64px; height:64px; border-width:4px; }
.avatar-medium .avatar-color{ width:32.35px; height:32.35px; filter:blur(10.3px); bottom:-6.5px; right:4.4px; }
.avatar-medium .avatar-placeholder{ font-size:var(--md-typography-font-size-700); }

.avatar-small{ width:48px; height:48px; border-width:3px; }
.avatar-small .avatar-color{ width:24.26px; height:24.26px; filter:blur(7.7px); bottom:-4.9px; right:3.3px; }
.avatar-small .avatar-placeholder{ font-size:var(--md-typography-font-size-500); }

.avatar-xsmall{ width:32px; height:32px; border-width:2px; }
.avatar-xsmall .avatar-color{ width:16.18px; height:16.18px; filter:blur(5.1px); bottom:-3.2px; right:2.2px; }
.avatar-xsmall .avatar-placeholder{ font-size:var(--md-typography-font-size-300); }

.avatar-group{ display:flex; align-items:center; }
.avatar-group .avatar-medium{ margin-right:-14px; }
.avatar-group .avatar-small,
.avatar-group .avatar-xsmall{ margin-right:-8px; }
.avatar-group .avatar:last-child{ margin-right:0; }