<span class="inline-flex items-center" aria-hidden="true">
  <% shown.each_with_index do |account, i| %>
    <span class="inline-flex items-center justify-center w-5 h-5 rounded-full text-inverse text-[9px] font-semibold ring-2 ring-container"
          style="background-color: <%= Goals::AvatarComponent.color_for(account.name) %>; <%= "margin-left: -6px;" if i > 0 %>"
          title="<%= account.name %>">
      <%= initial_for(account) %>
    </span>
  <% end %>
  <% if extra_count > 0 %>
    <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-surface-inset text-secondary text-[9px] font-semibold ring-2 ring-container"
          style="margin-left: -6px;">+<%= extra_count %></span>
  <% end %>
</span>
