.np-dot {
  --np-dot-size: 14px;
  position: relative;
  display: inline-block;
}
.np-dot-mask {
  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
  -webkit-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);
          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);
}
.np-dot-badge {
  position: absolute;
  width: var(--np-dot-size);
  height: var(--np-dot-size);
  border-radius: 9999px;
  border-radius: var(--radius-full);
  right: 0;
}
.np-dot-badge-notification {
  background-color: var(--color-sentiment-negative);
}
.np-dot-badge-online {
  background-color: #00a2dd;
  background-color: var(--color-interactive-accent);
}