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

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

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