.np-avatar-layout {
  display: inline-flex;
  --np-avatar-layout-size: 48px;
  --np-avatar-size: 32px;
}
.np-avatar-layout-diagonal {
  width: var(--np-avatar-layout-size);
  height: var(--np-avatar-layout-size);
}
.np-avatar-layout-diagonal-mask {
  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
}
[dir="rtl"] .np-avatar-layout-diagonal-mask {
  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
}
.np-avatar-layout-diagonal-child {
  margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
  margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
}
[dir="rtl"] .np-avatar-layout-diagonal-child {
  margin-left: 0;
  margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
}
.np-avatar-layout-horizontal {
  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
  height: var(--np-avatar-layout-size);
}
.np-avatar-layout-horizontal-mask {
  -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
          mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
  -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
          mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
}
.np-avatar-layout-horizontal-child {
  margin-left: calc(var(--np-avatar-offset) * -1);
}
[dir="rtl"] .np-avatar-layout-horizontal-child {
  margin-right: calc(var(--np-avatar-offset) * -1);
}