avatar.css

.ds-avatar {
  --ds-avatar-background: var(--ds-color-accent-base-default);
  --ds-avatar-color: var(--ds-color-accent-contrast-default);
  --ds-avatar-size: var(--ds-sizing-12);
  --ds-avatar-padding: var(--ds-spacing-2);
  --ds-avatar-border-radius: 50%;

  background: var(--ds-avatar-background);
  height: var(--ds-avatar-size);
  aspect-ratio: 1 / 1;
  color: var(--ds-avatar-color);
  border-radius: var(--ds-avatar-border-radius);
  overflow: hidden;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  text-transform: uppercase;
  text-decoration: none;

  &:not(:has(> img)) {
    padding: var(--ds-avatar-padding);
  }

  & img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  & svg {
    max-width: 100%;
    max-height: 100%;
  }

  &:empty::before {
    content: '';
    width: 100%;
    height: 100%;
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: currentcolor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24' focusable='false' role='img'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8.25 7.5a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0M12 2.25a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5M8.288 17.288A5.25 5.25 0 0 1 17.25 21a.75.75 0 0 0 1.5 0 6.75 6.75 0 0 0-13.5 0 .75.75 0 0 0 1.5 0 5.25 5.25 0 0 1 1.538-3.712' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
  }

  &[data-ds-variant='circle'] {
    --ds-avatar-border-radius: var(--ds-border-radius-full);
  }

  &[data-ds-variant='square'] {
    --ds-avatar-border-radius: var(--ds-border-radius-sm);
  }

  &[data-ds-color='accent'] {
    --ds-avatar-background: var(--ds-color-accent-base-default);
    --ds-avatar-color: var(--ds-color-accent-contrast-default);
  }

  &[data-ds-color='neutral'] {
    --ds-avatar-background: var(--ds-color-neutral-base-default);
    --ds-avatar-color: var(--ds-color-neutral-contrast-default);
  }

  &[data-ds-color='brand1'] {
    --ds-avatar-background: var(--ds-color-brand1-base-default);
    --ds-avatar-color: var(--ds-color-brand1-contrast-default);
  }

  &[data-ds-color='brand2'] {
    --ds-avatar-background: var(--ds-color-brand2-base-default);
    --ds-avatar-color: var(--ds-color-brand2-contrast-default);
  }

  &[data-ds-color='brand3'] {
    --ds-avatar-background: var(--ds-color-brand3-base-default);
    --ds-avatar-color: var(--ds-color-brand3-contrast-default);
  }

  &[data-ds-size='xs'] {
    --ds-avatar-size: var(--ds-sizing-7);
    --ds-avatar-padding: var(--ds-spacing-1);
  }

  &[data-ds-size='sm'] {
    --ds-avatar-size: var(--ds-sizing-9);
    --ds-avatar-padding: var(--ds-spacing-1);
  }

  &[data-ds-size='md'] {
    --ds-avatar-size: var(--ds-sizing-12);
    --ds-avatar-padding: var(--ds-spacing-2);
  }

  &[data-ds-size='lg'] {
    --ds-avatar-size: var(--ds-sizing-15);
    --ds-avatar-padding: var(--ds-spacing-2);
  }
}