/* Indicator — анимированный индикатор-точка (замена бейджа).
   Геометрия из мастер-компонента Figma: circle cx10 cy8 r5, stroke 2 (белый),
   viewBox 0 0 20 20, тень Shadow 4. Номинальный бокс компонента — 8×8,
   графика (точка + обводка + тень) выходит за него, как в дизайне.
   Цвет точки — через currentColor:
     - green (по умолчанию) → --color-positive-400
     - red                 → --color-negative-500 */

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

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

/* Векторная точка: перекрывает бокс, центр circle (10,8) попадает в центр 8×8 */
.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;   }
}

/* Детерминированная статика для сверки + уважение к prefers-reduced-motion */
.indicator--static .indicator__pulse { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .indicator__pulse { animation: none; opacity: 0; }
}