.user-avatar{border-radius:var(--radius-pill);flex:none;position:relative}.user-avatar--clickable{cursor:pointer}.user-avatar__img{border-radius:var(--radius-pill);object-fit:cover;display:block}.user-avatar--gradient{overflow:hidden}.user-avatar__overlay{border-radius:var(--radius-pill);background:var(--scrim);opacity:0;transition:opacity var(--transition), background-color var(--transition);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}@media (hover:hover) and (pointer:fine){.user-avatar__overlay:hover{opacity:1}}.user-avatar__overlay--persistent{background:var(--scrim);opacity:1}@media (hover:hover) and (pointer:fine){.user-avatar__overlay--persistent:hover{background:var(--media-scrim)}}.user-avatar__overlay svg{width:1.25rem;height:1.25rem;color:var(--on-media)}