@scope(.ui-avatar)to ([data-hn]){:scope:where([data-hn-ui-avatar]){--_ui-default-icon-size:1.25rem;background:var(--ui-avatar-surface,var(--ui-accent-soft));block-size:2.5rem;border:var(--ui-border-width) solid var( --ui-avatar-border,color-mix(in srgb,var(--ui-accent-solid) 35%,var(--ui-surface-default)) );border-radius:var(--ui-avatar-radius,var(--ui-radius-round));color:var(--ui-avatar-text,var(--ui-accent-subtle-text,var(--ui-accent-solid)));display:inline-grid!important;font:inherit;font-size:var(--ui-font-size-sm);font-weight:600;inline-size:2.5rem;line-height:1;overflow:hidden;place-items:center;text-transform:uppercase}:scope[data-ui-avatar-state~="size=sm"]:where([data-hn-ui-avatar]){--_ui-default-icon-size:1rem;block-size:1.75rem;font-size:var(--ui-font-size-xs);inline-size:1.75rem}:scope[data-ui-avatar-state~="size=xs"]:where([data-hn-ui-avatar]){--_ui-default-icon-size:.75rem;block-size:1.25rem;font-size:calc(var(--ui-font-size-md)*.5625);inline-size:1.25rem;letter-spacing:.02em}:scope[data-ui-avatar-state~=hasImage]:where([data-hn-ui-avatar]){border-color:var(--ui-avatar-border,var(--ui-border-strong))}:scope[data-ui-avatar-state~="shape=circle"]:where([data-hn-ui-avatar]){box-shadow:var(--ui-shadow-sm)}:scope[data-ui-avatar-state~="shape=square"]:where([data-hn-ui-avatar]){border-radius:var(--ui-avatar-radius,var(--ui-radius-md))}:scope[data-ui-avatar-state~=active]:where([data-hn-ui-avatar]){outline:var(--ui-border-width) solid var(--ui-avatar-active-ring,var(--ui-accent-solid));outline-offset:var(--ui-border-width)}.image:where([data-hn-ui-avatar]),:where(:not([data-hn-ui-avatar])):is(img){block-size:100%;grid-area:1/1;inline-size:100%;-o-object-fit:cover;object-fit:cover}.fallback:where([data-hn-ui-avatar]){align-items:center!important;block-size:100%;display:inline-flex!important;grid-area:1/1;inline-size:100%;justify-content:center!important}@supports (text-box-trim:trim-both){.fallback:where([data-hn-ui-avatar]){align-content:center!important;display:block!important;text-align:center;text-box-edge:cap alphabetic;text-box-trim:trim-both}}[hidden]:where([data-hn-ui-avatar]){display:none!important}:scope[hidden]:where([data-hn-ui-avatar]){display:none!important}}