.Viewers {
  @apply relative;

  > .Viewers-some {
    /* Overlap the list of viewers. */
    @apply flex -space-x-4;
  }

  > .Viewers-some > .Viewers-viewer {
    @apply relative overflow-hidden rounded-full;

    .Avatar {
      --avatar-size: theme('avatar.size.xs');
      @apply border-[1.5px] border-white dark:bg-[oklch(from_var(--avatar-bg-color)_calc(l_*_1.6)_c_h)];
    }

    &:where([data-editing], [data-locked]) .Avatar {
      @apply border-success-400;
    }
  }
}
