@layer components{.avatar{align-items:center;aspect-ratio:1/1;background:var(--color-background-accent-primary);border-radius:var(--radius-capsule);display:flex;flex-direction:column;justify-content:center}.avatar--xsmall{height:calc(var(--spacing)*16);width:calc(var(--spacing)*16)}.avatar--small{height:calc(var(--spacing)*24);width:calc(var(--spacing)*24)}.avatar--medium{height:calc(var(--spacing)*32);width:calc(var(--spacing)*32)}.avatar--large{height:calc(var(--spacing)*40);width:calc(var(--spacing)*40)}.avatar--xlarge{height:calc(var(--spacing)*60);width:calc(var(--spacing)*60)}.avatar__text{color:var(--color-content-main-content-white);font-family:var(--typography-body-family-font-font);font-style:normal;font-weight:var(--typography-body-font-weight-sm);text-align:center}.avatar--xsmall .avatar__text{font-family:var(--typography-caption-family-font-font);font-size:calc(var(--spacing)*8);font-weight:var(--typography-caption-font-weight-sm);line-height:100%}.avatar--medium .avatar__text,.avatar--small .avatar__text{font-size:var(--typography-body-font-size-b4);line-height:var(--typography-body-line-height-b4)}.avatar--large .avatar__text{font-size:var(--typography-body-font-size-b3);line-height:var(--typography-body-line-height-b3)}.avatar--xlarge .avatar__text{font-size:var(--typography-body-font-size-b2);line-height:var(--typography-body-line-height-b2)}.avatar--loading{animation:var(--animate-pulse);background:var(--color-overlay-skeleton)}}