/* The +N of the design system (/design-system#more_count). */
.ds-more {
  --more-fill: color-mix(in oklab, var(--ds-text) 10%, var(--ground, var(--ds-bg-pure)));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex-shrink: 0;
  box-sizing: border-box;
  min-inline-size: var(--ds-more-size);
  block-size: var(--ds-more-size);
  padding-inline: 2px;
  border-radius: var(--ds-radius-full);
  background: var(--more-fill);
  color: var(--ds-text-secondary);
  font-size: clamp(var(--ds-status-font-xs), calc(var(--ds-more-size) * 0.6), var(--ds-status-font));
  font-weight: var(--ds-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.ds-more--icon { padding-inline: 5px 6px; }

:is(.ds-chip, .ds-avatar-group__face) + .ds-more { outline: 2px solid var(--ground, var(--ds-bg-pure)); }
/* Over the pill by a fifth of itself, the row's gap taken back. */
.ds-chip + .ds-more { margin-inline-start: calc(var(--ds-more-size) * -0.2 - var(--ds-space-1)); }
.ds-chip--xs:has(+ .ds-more) { padding-inline-end: 10px; }
.ds-chip--sm:has(+ .ds-more) { padding-inline-end: 12px; }