.avatar{--avatar-size: var(--size-6);--avatar-border: 1px solid var(--color-border-emphasis);position:relative;height:var(--avatar-size);width:var(--avatar-size)}.avatar[data-editable=true]{cursor:pointer}.avatar[data-size=sm]{--avatar-size: var(--size-4)}.avatar[data-size=lg]{--avatar-size: var(--size-8)}.avatar[data-size=xl]{--avatar-size: var(--size-13)}.avatar-image{box-sizing:border-box;border-radius:var(--radius-full);overflow:hidden;border:var(--avatar-border);transition:all var(--duration-short) var(--ease-in-out);height:var(--avatar-size);width:var(--avatar-size);display:flex;align-items:center;justify-content:center}.avatar-icon{position:absolute;display:flex;inset-block-end:-2px;inset-inline-end:-1px;width:var(--size-3);height:var(--size-3);background-color:var(--color-interactive-primary);border-radius:var(--radius-full);align-items:center;justify-content:center;color:var(--color-interactive-primary-contrast)}@media(min-width:768px){:root{--font-size-display-xs: var(--font-size-md);--font-size-display-sm: var(--font-size-xl);--font-size-display-md: var(--font-size-3xl);--font-size-display-lg: var(--font-size-5xl);--font-size-display-xl: var(--font-size-7xl);--font-size-display-2xl: var(--font-size-10xl);--space-1: var(--size-1);--space-2: var(--size-2);--space-3: var(--size-3);--space-4: var(--size-4);--space-5: var(--size-5);--space-6: var(--size-6);--space-8: var(--size-8);--space-10: var(--size-10);--space-12: var(--size-12);--space-14: var(--size-14);--space-16: var(--size-16);--space-18: var(--size-18);--space-20: var(--size-20);--space-30: var(--size-30);--space-40: var(--size-40)}}