.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--theme-surface-muted);
  color: var(--theme-text-subtle);
  font-weight: 600;
  flex-shrink: 0;

  &[data-size="sm"] {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    font-size: var(--text-xs);
  }

  &[data-size="md"], &:not([data-size]) {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    font-size: var(--text-sm);
  }

  &[data-size="lg"] {
    inline-size: 3.5rem;
    block-size: 3.5rem;
    font-size: var(--text-lg);
  }

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}