.badges {
  inset-block-start: -0.75em;
  inset-inline-end: -0.75em;
  position: absolute;
}

.badge-dot {
  --dot-size: 15px;
  background-color: var(--color-notification);
  block-size: var(--dot-size);
  border: 2px solid var(--color-body);
  border-radius: 50%;
  inline-size: var(--dot-size);
  inset-block-start: 5px;
  inster-inline-start: 5px;
  position: absolute;
}

.badge-pulse {
  --dot-size: 25px;
  animation-iteration-count: infinite;
  animation: pulsate 1s ease-out;
  block-size: var(--dot-size);
  border: 3px solid var(--color-notification);
  border-radius: 30px;
  inline-size: var(--dot-size);
  opacity: 0;
}