.np-avatar-layout {
  display: inline-flex;
  --np-avatar-layout-size: 48px;
  --np-avatar-size: 32px;

  &-diagonal {
    width: var(--np-avatar-layout-size);
    height: var(--np-avatar-layout-size);

    &-mask {
      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) & {
        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);
      }
    }

    &-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) & {
        margin-left: 0;
        margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
      }
    }
  }

  &-horizontal {
    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);

    &-mask {
      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);
    }

    &-child {
      margin-left: calc(var(--np-avatar-offset) * -1);

      :dir(rtl) & {
        margin-right: calc(var(--np-avatar-offset) * -1);
      }
    }
  }
}