.base-avatar { --avatar-size: var(--size, 16px); &--size-xs { --size: 16px; } &--size-sm { --size: 24px; } &--size-md { --size: 32px; } &--size-lg { --size: 40px; } &--size-xl { --size: 48px; } height: var(--avatar-size); width: var(--avatar-size); border-radius: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }