.ui-avatar{-webkit-user-select:none;user-select:none;--mask-size:clamp(8px,.2em,16px);--badge-size:calc(var(--mask-size)*1.5);--shift:4px;width:1em;height:1em;display:block;position:relative}.ui-avatar__fallback,.ui-avatar__image{border-radius:var(--radius-md);aspect-ratio:1;display:block}.ui-avatar--badge .ui-avatar__fallback,.ui-avatar--badge .ui-avatar__image{-webkit-mask:radial-gradient(circle var(--mask-size) at calc(100% - var(--shift)) calc(100% - var(--shift)),transparent 98%,#000);-webkit-mask:radial-gradient(circle var(--mask-size) at calc(100% - var(--shift)) calc(100% - var(--shift)),transparent 98%,#000);mask:radial-gradient(circle var(--mask-size) at calc(100% - var(--shift)) calc(100% - var(--shift)),transparent 98%,#000)}.ui-avatar__image{-webkit-user-select:none;user-select:none;object-fit:cover;width:100%;height:100%}.ui-avatar__fallback{background-color:oklch(from var(--colors-foreground) l c h/10%)}.ui-avatar__badge{--un-leading:0;aspect-ratio:1;--un-translate-x:50%;translate:var(--un-translate-x) var(--un-translate-y);--un-translate-y:50%;translate:var(--un-translate-x) var(--un-translate-y);bottom:var(--shift);height:var(--badge-size);right:var(--shift);width:var(--badge-size);justify-content:center;align-items:center;line-height:0;display:flex;position:absolute}@property --un-leading{syntax:"*";inherits:false}@property --un-translate-x{syntax:"*";inherits:false;initial-value:0}@property --un-translate-y{syntax:"*";inherits:false;initial-value:0}@property --un-translate-z{syntax:"*";inherits:false;initial-value:0}.ui-avatar__status{border-radius:3.40282e38px;width:100%;height:100%;display:block}.ui-avatar__status--online{background-color:color-mix(in srgb, var(--colors-green-6) var(--un-bg-opacity), transparent) }@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@supports (color:color-mix(in lab, red, red)){.ui-avatar__status--online{background-color:color-mix(in oklab, var(--colors-green-6) var(--un-bg-opacity), transparent) }}.ui-avatar__status--offline{background-color:color-mix(in srgb, var(--colors-gray-6) var(--un-bg-opacity), transparent) ;-webkit-mask:radial-gradient(circle calc(var(--badge-size) - clamp(8px, .1875em, 12px)) at center,transparent 98%,#000);-webkit-mask:radial-gradient(circle calc(var(--badge-size) - clamp(8px, .1875em, 12px)) at center,transparent 98%,#000);mask:radial-gradient(circle calc(var(--badge-size) - clamp(8px, .1875em, 12px)) at center,transparent 98%,#000)}@supports (color:color-mix(in lab, red, red)){.ui-avatar__status--offline{background-color:color-mix(in oklab, var(--colors-gray-6) var(--un-bg-opacity), transparent) }}.ui-avatar__status--away{background-color:color-mix(in srgb, var(--colors-yellow-8) var(--un-bg-opacity), transparent) }@supports (color:color-mix(in lab, red, red)){.ui-avatar__status--away{background-color:color-mix(in oklab, var(--colors-yellow-8) var(--un-bg-opacity), transparent) }}.ui-avatar__status--busy{background-color:color-mix(in srgb, var(--colors-red-6) var(--un-bg-opacity), transparent) }@supports (color:color-mix(in lab, red, red)){.ui-avatar__status--busy{background-color:color-mix(in oklab, var(--colors-red-6) var(--un-bg-opacity), transparent) }}.ui-avatar--rounded{border-radius:3.40282e38px}.ui-avatar--outline{border-radius:var(--radius-md);outline:clamp(2px,.046875em,6px) solid var(--current-color);outline-offset:clamp(1px,.046875em,4px)}