@use '../../abstract' as *;

.pulse-notification {
  --p-pulse-color: var(--color-primary-200);
  box-sizing: content-box;
  inline-size: pxToRem(8);
  block-size: pxToRem(8);
  background-color: hsl(var(--p-pulse-color));
  border-radius: 50%;
  position: relative;
  &::before {
    content:''; display:block;
    position:absolute; inset:pxToRem(-1);
    border-radius:50%; border:pxToRem(0.25) double hsl(var(--p-pulse-color));
    animation: pulse 1s ease infinite;
    @media (prefers-reduced-motion) { animation:none; }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  60% {
    transform: scale(1.2);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.3);
    opacity: 0.3;
  }
}