.np-dot {
  --np-dot-size: 14px;
  position: relative;
  display: inline-block;

  &-mask {
    mask-image: radial-gradient(
        circle at bottom calc(100% - calc(var(--np-dot-size) / 2))
                  left calc(100% - calc(var(--np-dot-size) / 2)),
        transparent 0,
        transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)),
        black 0
    );
  }

  &-badge {
    position: absolute;
    width: var(--np-dot-size);
    height: var(--np-dot-size);
    border-radius: var(--radius-full);
    right: 0;
    
    &-notification {
      background-color: var(--color-sentiment-negative);
    }

    &-online {
      background-color: var(--color-interactive-accent);
    }
  }
}