@layer components {
  /*
    アバターを重ねずに、間を2px空けて並べる（実測: basecamp2-official/bc2-features-progress-catch-up.jpg の
    「15 people contributed」の行 (60, 146, 370, 22)。1倍。22pxの円が2px（ところどころ3px）の間隔で並ぶ）。
    並べきれない人数は、アバターの大きさにかかわらず、BC2の担当者と期日のピルと同じ形（実測: lists.md「BC2 To-do」。
    高さ18px・角丸9px・左右の余白9px、平らな #eeeeee に灰色の文字）で添え、アバターの中央にそろえる。
    アバターと同じ大きさの丸にはしない（ピルの形は高さ18pxだけにする）。
  */
  .rx-avatar-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem;
    /* 数字は右から左に読む画面でも「+n」の順に書く。 */
    & > .more {
      display: inline-block;
      padding-inline: 0.5625rem;
      border-radius: var(--rx-radius-pill);
      /* 透明な輪郭は、強制カラーで背景が消えた時だけ見える縁になる。 */
      outline: var(--rx-stroke-width) solid transparent;
      outline-offset: calc(var(--rx-stroke-width) * -1);
      background: var(--rx-pill-meta);
      color: var(--rx-pill-meta-text);
      font-size: var(--rx-small);
      font-weight: 400;
      line-height: 1.125rem;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      direction: ltr;
      unicode-bidi: isolate;
    }
  }
}