/* Group avatar of the design system (/design-system#group_avatar): a conversation of several people in the box of
   one avatar. The first face sits top left, the second bottom right, and the +N bottom left; each face is cut
   where the next one lies instead of ringed, so the pile reads the same on any row colour, hover or selected. */
.ds-group-avatar {
  --face: calc(var(--ds-group-avatar-size) * 0.65);
  --more: calc(var(--ds-group-avatar-size) * 0.45);
  --gap: 2px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  inline-size: var(--ds-group-avatar-size);
  block-size: var(--ds-group-avatar-size);
}

.ds-group-avatar__face {
  position: absolute;
  inline-size: var(--face);
  block-size: var(--face);
  border-radius: var(--ds-radius-full);
}

.ds-group-avatar__face:first-child {
  inset-block-start: 0;
  inset-inline-start: 0;
  --behind: radial-gradient(circle at calc(var(--ds-group-avatar-size) - var(--face) / 2) calc(var(--ds-group-avatar-size) - var(--face) / 2),
    transparent calc(var(--face) / 2 + var(--gap)), black calc(var(--face) / 2 + var(--gap) + 0.5px));
  mask: var(--behind);
}

.ds-group-avatar__face:nth-child(2) {
  inset-block-end: 0;
  inset-inline-end: 0;
}

.ds-group-avatar__more {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  min-inline-size: var(--more);
  block-size: var(--more);
  padding-inline: 2px;
  box-sizing: border-box;
  border-radius: var(--ds-radius-full);
  background: var(--ds-fill-hover);
  color: var(--ds-text-secondary);
  font-size: max(8px, calc(var(--more) * 0.56));
  font-weight: var(--ds-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* With the +N the faces also give way to it, at the bottom-left corner; a mask is laid in the face's own box,
   so the second face, which starts at size - face, sees the +N's centre shifted by that much. */
.ds-group-avatar--more .ds-group-avatar__face:first-child {
  mask: var(--behind), radial-gradient(circle at calc(var(--more) / 2) calc(var(--ds-group-avatar-size) - var(--more) / 2),
    transparent calc(var(--more) / 2 + var(--gap)), black calc(var(--more) / 2 + var(--gap) + 0.5px));
  mask-composite: intersect;
}

.ds-group-avatar--more .ds-group-avatar__face:nth-child(2) {
  mask: radial-gradient(circle at calc(var(--more) / 2 - var(--ds-group-avatar-size) + var(--face)) calc(var(--face) - var(--more) / 2),
    transparent calc(var(--more) / 2 + var(--gap)), black calc(var(--more) / 2 + var(--gap) + 0.5px));
}