@property --_ui-avatar-group-requested-limit{syntax:"*";inherits:true}@property --ui-avatar-bg{syntax:"<color>";inherits:true;initial-value:rgba(0,0,0,0)}@property --ui-avatar-group-more-bg{syntax:"<color>";inherits:true;initial-value:rgba(0,0,0,0)}@property --ui-avatar-group-more-fg{syntax:"<color>";inherits:true;initial-value:rgba(0,0,0,0)}@property --ui-avatar-group-separator-color{syntax:"<color>";inherits:true;initial-value:rgba(0,0,0,0)}@property --ui-avatar-ring-color{syntax:"<color>";inherits:true;initial-value:rgba(0,0,0,0)}@property --_ui-avatar-group-index{syntax:"<integer>";inherits:true;initial-value:0}@property --_ui-avatar-group-offset{syntax:"<length-percentage>";inherits:true;initial-value:0px}@property --ui-avatar-group-offset{syntax:"<length-percentage>";inherits:true;initial-value:0px}@property --ui-avatar-group-separator-width{syntax:"<length-percentage>";inherits:true;initial-value:0px}@property --ui-avatar-lg{syntax:"<length-percentage>";inherits:true;initial-value:0px}@property --ui-avatar-md{syntax:"<length-percentage>";inherits:true;initial-value:0px}@property --ui-avatar-radius{syntax:"<length-percentage>";inherits:true;initial-value:0px}@property --ui-avatar-ring-offset{syntax:"<length-percentage>";inherits:true;initial-value:0px}@property --ui-avatar-ring-width{syntax:"<length-percentage>";inherits:true;initial-value:0px}@property --ui-avatar-size{syntax:"<length-percentage>";inherits:true;initial-value:0px}@property --ui-avatar-sm{syntax:"<length-percentage>";inherits:true;initial-value:0px}@property --ui-avatar-xl{syntax:"<length-percentage>";inherits:true;initial-value:0px}@property --ui-avatar-xs{syntax:"<length-percentage>";inherits:true;initial-value:0px}@property --_ui-avatar-group-count{syntax:"<number>";inherits:true;initial-value:0}@property --_ui-avatar-group-has-overflow{syntax:"<number>";inherits:true;initial-value:0}@property --_ui-avatar-group-is-overflow-avatar{syntax:"<number>";inherits:false;initial-value:0}@property --_ui-avatar-group-limit{syntax:"<number>";inherits:true;initial-value:0}@property --_ui-avatar-group-overflow{syntax:"<number>";inherits:true;initial-value:0}@property --_ui-avatar-group-rendered{syntax:"<number>";inherits:true;initial-value:0}@property --_ui-avatar-group-visible{syntax:"<number>";inherits:true;initial-value:0}@layer reset, base, components, utilities;@layer base{:root{--ui-avatar-xs: 1rem;--ui-avatar-sm: 2rem;--ui-avatar-md: 2.25rem;--ui-avatar-lg: 2.5rem;--ui-avatar-xl: 4rem;--ui-avatar-size: var(--ui-avatar-sm);--ui-avatar-radius: var(--ui-radius, 0.375rem);--ui-avatar-bg: color-mix( in oklch, var(--ui-fg, CanvasText) 5%, var(--ui-bg, Canvas) );--ui-avatar-ring-width: 0.125rem;--ui-avatar-ring-color: var(--ui-avatar-bg, Canvas);--ui-avatar-ring-offset: var(--ui-ring-offset, 0.0625rem);--ui-avatar-group-offset: calc(var(--ui-avatar-size, 2rem) - 0.5rem);--ui-avatar-group-separator-width: 0.125rem;--ui-avatar-group-separator-color: var(--ui-bg, Canvas);--ui-avatar-group-more-bg: var(--ui-secondary, ButtonFace);--ui-avatar-group-more-fg: var(--ui-fg, CanvasText)}}@layer base{.ui-avatar{position:relative;box-sizing:border-box;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;inline-size:var(--ui-avatar-size, 2rem);block-size:var(--ui-avatar-size, 2rem);object-fit:cover;text-align:center;text-transform:uppercase;font-size:calc(var(--ui-avatar-size, 2rem)/2);user-select:none;-webkit-user-drag:none}@scope (.ui-avatar-group){:scope{--_ui-avatar-group-offset: attr( data-avatar-offset type(<length>), var( --ui-avatar-group-offset, calc(var(--ui-avatar-size, 2rem) - 0.5rem) ) );display:inline-flex;align-items:center;min-inline-size:0;isolation:isolate}:scope[data-group-limit]{--_ui-avatar-group-requested-limit: max( 1, attr(data-group-limit type(<integer>), 1) )}:scope>.ui-avatar{flex:0 0 auto;box-shadow:0 0 0 var(--ui-avatar-group-separator-width, 0.125rem) var(--ui-avatar-group-separator-color, Canvas)}:scope>.ui-avatar+.ui-avatar{margin-inline-start:calc(var(--_ui-avatar-group-offset) - var(--ui-avatar-size, 2rem))}:scope.ui-xs{--ui-avatar-size: var(--ui-avatar-xs, 1rem)}:scope.ui-sm{--ui-avatar-size: var(--ui-avatar-sm, 2rem)}:scope.ui-md{--ui-avatar-size: var(--ui-avatar-md, 2.25rem)}:scope.ui-lg{--ui-avatar-size: var(--ui-avatar-lg, 2.5rem)}:scope.ui-xl{--ui-avatar-size: var(--ui-avatar-xl, 4rem)}}}@layer components{.ui-avatar{border-radius:var(--ui-avatar-radius, 0.375rem);background-color:var(--ui-avatar-bg, Canvas)}.ui-avatar:not(:empty){background-color:var(--ui-avatar-bg, Canvas)}.ui-avatar.ui-circle{border-radius:50%}.ui-avatar.ui-ring{outline:var(--ui-avatar-ring-width, 0.125rem) solid var(--ui-avatar-ring-color, Canvas);outline-offset:var(--ui-avatar-ring-offset, 0.0625rem)}.ui-avatar.ui-xs{--ui-avatar-size: var(--ui-avatar-xs, 1rem)}.ui-avatar.ui-sm{--ui-avatar-size: var(--ui-avatar-sm, 2rem)}.ui-avatar.ui-md{--ui-avatar-size: var(--ui-avatar-md, 2.25rem)}.ui-avatar.ui-lg{--ui-avatar-size: var(--ui-avatar-lg, 2.5rem)}.ui-avatar.ui-xl{--ui-avatar-size: var(--ui-avatar-xl, 4rem)}@supports(z-index: sibling-index()){@scope (.ui-avatar-group){:scope.ui-interactive>.ui-avatar:is(:hover,:focus-visible,:focus-within){z-index:calc(sibling-count() + 1)}}}@supports(z-index: sibling-index()) and (content: if(style(--_ui-avatar-group-is-overflow-avatar: 1): "x"; else: normal)){@scope (.ui-avatar-group){:scope>.ui-avatar{--_ui-avatar-group-index: sibling-index();--_ui-avatar-group-count: sibling-count();--_ui-avatar-group-limit: min( var( --_ui-avatar-group-requested-limit, var(--_ui-avatar-group-count) ), var(--_ui-avatar-group-count) );--_ui-avatar-group-visible: clamp( 0, calc( var(--_ui-avatar-group-limit) - var(--_ui-avatar-group-index) + 1 ), 1 );--_ui-avatar-group-overflow: max( 0, calc( var(--_ui-avatar-group-count) - var(--_ui-avatar-group-limit) ) );--_ui-avatar-group-has-overflow: clamp( 0, var(--_ui-avatar-group-overflow), 1 );--_ui-avatar-group-is-overflow-avatar: calc( var(--_ui-avatar-group-has-overflow) * clamp( 0, calc( 1 - abs( var(--_ui-avatar-group-index) - var(--_ui-avatar-group-limit) - 1 ) ), 1 ) );--_ui-avatar-group-rendered: max( var(--_ui-avatar-group-visible), var(--_ui-avatar-group-is-overflow-avatar) );z-index:var(--_ui-avatar-group-index);inline-size:calc(var(--ui-avatar-size, 2rem)*var(--_ui-avatar-group-rendered));block-size:calc(var(--ui-avatar-size, 2rem)*var(--_ui-avatar-group-rendered));margin-inline-start:calc((var(--_ui-avatar-group-offset) - var(--ui-avatar-size, 2rem))*clamp(0,var(--_ui-avatar-group-index) - 1,1)*var(--_ui-avatar-group-rendered));opacity:var(--_ui-avatar-group-rendered);font-size:calc(var(--ui-avatar-size, 2rem)*(.5*var(--_ui-avatar-group-visible) + .36*var(--_ui-avatar-group-is-overflow-avatar)));box-shadow:0 0 0 calc(var(--ui-avatar-group-separator-width, 0.125rem)*var(--_ui-avatar-group-rendered)) var(--ui-avatar-group-separator-color, Canvas);overflow:hidden;counter-reset:ui-avatar-group-more var(--_ui-avatar-group-overflow);content:if(style(--_ui-avatar-group-is-overflow-avatar: 1): "+" counter(ui-avatar-group-more); else: normal);background:if(style(--_ui-avatar-group-is-overflow-avatar: 1): var(--ui-avatar-group-more-bg, var(--ui-secondary, ButtonFace)); else: var(--ui-avatar-bg, Canvas));color:if(style(--_ui-avatar-group-is-overflow-avatar: 1): var(--ui-avatar-group-more-fg, CanvasText); else: inherit);pointer-events:if(style(--_ui-avatar-group-is-overflow-avatar: 1): none; else: revert-layer)}}}}