.np-avatar-group {
  display: inline-flex;
  position: relative;

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

    &-mask {
      mask-image: radial-gradient(
        circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5)
                  right calc(100% - var(--np-avatar-group-size) / 1.5),
        transparent 0,
        transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px),
        black 0
      );
    }

    &-child {
      position: absolute;
      top: var(--np-avatar-group-diagonal-child-position);
      right: 0;
    }
  }

  &-horizontal {
    height: var(--np-avatar-group-size);

    &-mask {
      mask-image: radial-gradient(
          circle at top calc(100% - var(--np-avatar-group-single-size) / 2)
                  right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1),
          transparent 0,
          transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), 
          black 0);
    }

    &-child {
      margin-left: calc(var(--np-avatar-group-horizontal-child-position) * -1);
    }
  }
}
