.indicator {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  color: var(--color-positive-400);
}

.indicator--red { color: var(--color-negative-500); }

.indicator__art {
  position: absolute;
  left: -6px;
  top: -4px;
  width: 20px;
  height: 20px;
  overflow: visible;
  filter: drop-shadow(var(--shadow-4));
}

.indicator__dot {
  fill: currentColor;
  stroke: var(--color-gray-0);
}

.indicator__pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  animation: indicator-pulse 1.6s ease-out infinite;
}

@keyframes indicator-pulse {
  0%   { transform: scale(1);   opacity: 0.4; }
  100% { transform: scale(2.6); opacity: 0;   }
}

.indicator--static .indicator__pulse { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .indicator__pulse { animation: none; opacity: 0; }
}