.display-chip-core{--computed-mask-diameter:calc(var(--chip-size) + var(--chip-mask-width)*2);--color-offline:#708090;--color-online:#00ff87;--color-idle:#ffb933;--color-dnd:#ff2850;display:inline-block;position:relative}.display-chip-core.circle{--computed-chip-offset:calc(50% + var(--chip-offset));--computed-position-x:calc(var(--computed-chip-offset)*cos(var(--chip-angle) - 90deg) + 50%);--computed-position-y:calc(var(--computed-chip-offset)*sin(var(--chip-angle) - 90deg) + 50%)}.display-chip-core.square{--circle-x:calc(50% + (50% + var(--chip-offset) + var(--chip-size)/2)*cos(var(--chip-angle) - 90deg));--circle-y:calc(50% + (50% + var(--chip-offset) + var(--chip-size)/2)*sin(var(--chip-angle) - 90deg));--computed-position-x:clamp(calc(var(--chip-offset)*-1),var(--circle-x),calc(100% + var(--chip-offset)));--computed-position-y:clamp(calc(var(--chip-offset)*-1),var(--circle-y),calc(100% + var(--chip-offset)))}.display-chip-core:after{aspect-ratio:1;background:var(--color-offline);content:"";z-index:1}.display-chip-core:after,.display-chip-core .chip-icon{border-radius:100%;position:absolute;width:var(--chip-size)}.display-chip-core .chip-icon{align-items:center;color:#000;display:flex;height:var(--chip-size);justify-content:center;z-index:2}.display-chip-core .chip-label{--_font-size-adjust:.7;align-items:center;border-radius:100%;color:#000;display:flex;font-size:calc(var(--chip-size)*var(--_font-size-adjust));height:var(--chip-size);justify-content:center;letter-spacing:-.05rem;line-height:1;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--chip-size);z-index:2}.display-chip-core .chip-label.length-2{--_font-size-adjust:.6}.display-chip-core .chip-label.length-3{--_font-size-adjust:.5}.display-chip-core>*:not(.chip-icon,.chip-label){-webkit-mask-image:radial-gradient(var(--computed-mask-diameter) var(--computed-mask-diameter) at var(--computed-position-x) var(--computed-position-y),transparent calc(50% - .5px),#000 calc(50% + .5px));mask-image:radial-gradient(var(--computed-mask-diameter) var(--computed-mask-diameter) at var(--computed-position-x) var(--computed-position-y),transparent calc(50% - .5px),#000 calc(50% + .5px))}.display-chip-core.circle:after,.display-chip-core.circle .chip-icon,.display-chip-core.circle .chip-label{left:calc(var(--computed-position-x) - var(--chip-size)/2);top:calc(var(--computed-position-y) - var(--chip-size)/2)}.display-chip-core.square:after,.display-chip-core.square .chip-icon,.display-chip-core.square .chip-label{left:calc(var(--computed-position-x) - var(--chip-size)/2);top:calc(var(--computed-position-y) - var(--chip-size)/2)}.display-chip-core.online:after{background-color:var(--color-online)}.display-chip-core.idle:after{background-color:var(--color-idle)}.display-chip-core.dnd:after{background-color:var(--color-dnd)}