@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}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}.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__image,.ui-avatar__fallback{border-radius:var(--radius-md);aspect-ratio:1;display:block}.ui-avatar--badge .ui-avatar__image,.ui-avatar--badge .ui-avatar__fallback{-webkit-mask:radial-gradient(circle var(--mask-size) at calc(100% - var(--shift)) calc(100% - var(--shift)), transparent 98%, black);mask:radial-gradient(circle var(--mask-size) at calc(100% - var(--shift)) calc(100% - var(--shift)), transparent 98%, black)}.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);width:var(--badge-size);height:var(--badge-size);bottom:var(--shift);right:var(--shift);justify-content:center;align-items:center;line-height:0;display:flex;position:absolute}.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)}@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%, black);mask:radial-gradient(circle calc(var(--badge-size) - clamp(8px, .1875em, 12px)) at center, transparent 98%, black)}@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)}