.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);
}
.np-avatar-view .np-avatar-view-content {
  color: #37517e;
  color: var(--color-sentiment-content-primary, var(--color-content-primary));
}
.np-avatar-view-interactive {
  cursor: pointer;
}
.np-avatar-view-interactive .np-circle {
  background-color: rgba(134,167,189,0.10196);
  background-color: var(--color-background-neutral);
  color: var(--color-interactive-primary);
}
.np-avatar-view-non-interactive .np-circle {
  background-color: transparent;
}
.np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
  box-shadow: none;
}