.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background-color: var(--ds-color-surface-sunken);
  color: var(--ds-color-text-muted);
  font-weight: var(--ds-weight-medium);
  user-select: none;
}

.ds-avatar--circle {
  border-radius: var(--ds-radius-full);
}

.ds-avatar--square {
  border-radius: var(--ds-radius-md);
}

.ds-avatar--xs { width: 20px; height: 20px; font-size: 9px; }
.ds-avatar--sm { width: 28px; height: 28px; font-size: var(--ds-text-xs); }
.ds-avatar--md { width: 36px; height: 36px; font-size: var(--ds-text-sm); }
.ds-avatar--lg { width: 48px; height: 48px; font-size: var(--ds-text-lg); }
.ds-avatar--xl { width: 64px; height: 64px; font-size: var(--ds-text-xl); }

.ds-avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ds-avatar__initials {
  line-height: 1;
  letter-spacing: 0.02em;
}

.ds-avatar__placeholder {
  width: 62%;
  height: 62%;
  opacity: 0.75;
}