/* Hide text when size is reduced, show only the dot */
nv-notification-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sidebar-notification-bullet-size);
  max-width: var(--sidebar-notification-bullet-size);
  height: var(--sidebar-notification-bullet-size);
  padding: 0 var(--spacing-1);
  border-radius: var(--radius-rounded-full);
  font-size: var(--sidebar-notification-bullet-font-size);
  font-weight: var(--sidebar-notification-bullet-font-weight);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  /* Intention: brand */
}
nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sidebar-notification-bullet-size);
  max-width: var(--sidebar-notification-bullet-size);
  height: var(--sidebar-notification-bullet-size);
  padding: 0 var(--spacing-1);
  border-radius: var(--radius-rounded-full);
  font-size: var(--sidebar-notification-bullet-font-size);
  font-weight: var(--sidebar-notification-bullet-font-weight);
  white-space: nowrap;
  flex-shrink: 0;
}
nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet.nv-notification-bullet-high {
  background-color: var(--color-brand-500);
  color: var(--color-feedback-neutral-high-contrast-title);
}
nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet.nv-notification-bullet-low {
  background-color: var(--color-brand-50);
  color: var(--color-brand-600);
  border: 1px solid var(--color-brand-600);
}
nv-notification-bullet {
  /* Intention: neutral */
}
nv-notification-bullet.nv-notification-bullet-neutral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sidebar-notification-bullet-size);
  max-width: var(--sidebar-notification-bullet-size);
  height: var(--sidebar-notification-bullet-size);
  padding: 0 var(--spacing-1);
  border-radius: var(--radius-rounded-full);
  font-size: var(--sidebar-notification-bullet-font-size);
  font-weight: var(--sidebar-notification-bullet-font-weight);
  white-space: nowrap;
  flex-shrink: 0;
}
nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-high {
  background-color: var(--color-feedback-neutral-high-contrast-background);
  color: var(--color-feedback-neutral-high-contrast-title);
}
nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-low {
  background-color: var(--color-feedback-neutral-low-background);
  color: var(--color-feedback-neutral-low-text);
  border-radius: var(--radius-rounded-full);
}
nv-notification-bullet {
  /* Contrasting border (cross-border backdrop) - creates a larger circle behind the bullet */
  /* The cross-border intelligently inherits the background color from the parent (nv-sidebarnavitem-trigger) */
}
nv-notification-bullet.nv-notification-bullet-with-cross-border::before {
  content: "";
  position: absolute;
  top: 55%;
  left: 45%;
  transform: translate(-50%, -50%);
  width: calc(var(--sidebar-notification-bullet-size) + 1.5px);
  height: calc(var(--sidebar-notification-bullet-size) * 1.5);
  border-radius: var(--radius-rounded-full);
  /* Intelligently inherits background color from parent via CSS variable */
  /* Supports multiple parent types: --nv-component-background (generic) or --nv-sidebarnavitem-background (sidebar specific) */
  background-color: var(--nv-component-background, var(--nv-sidebarnavitem-background, var(--color-interaction-container-neutral-background)));
  z-index: -1;
  pointer-events: none;
}
nv-notification-bullet {
  /* Cross-border for reduced size (when sidebar is collapsed) */
}
nv-sidebar[collapsed] nv-notification-bullet.nv-notification-bullet-with-cross-border::before {
  width: calc(var(--sidebar-notification-bullet-size-reduced) * 1.5);
  height: calc(var(--sidebar-notification-bullet-size-reduced) * 1.5);
}
nv-notification-bullet {
  /* Size: reduced */
}
nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-reduced, nv-sidebar[collapsed] nv-notification-bullet .nv-notification-bullet {
  width: var(--sidebar-notification-bullet-size-reduced);
  height: var(--sidebar-notification-bullet-size-reduced);
  min-width: var(--sidebar-notification-bullet-size-reduced);
  max-width: var(--sidebar-notification-bullet-size-reduced);
  min-height: var(--sidebar-notification-bullet-size-reduced);
  max-height: var(--sidebar-notification-bullet-size-reduced);
  padding: 0;
  font-size: 0;
}