/**
 * StatusDot styles
 * @countermeasure/web-components/display/status-dot
 */

.cmm-status-dot {
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 9999px;
  background: currentColor;
  vertical-align: middle;
}

.cmm-status-dot--sm {
  width: 6px;
  height: 6px;
}

.cmm-status-dot--md {
  width: 8px;
  height: 8px;
}

.cmm-status-dot--success {
  color: var(--color-success, hsl(var(--success)));
}

.cmm-status-dot--warning {
  color: var(--color-warning, hsl(var(--warning)));
}

.cmm-status-dot--error {
  color: var(--color-error, hsl(var(--danger)));
}

.cmm-status-dot--info {
  color: var(--color-info, hsl(var(--info)));
}

.cmm-status-dot--deploying {
  color: var(--color-orange-400, #fb923c);
}

.cmm-status-dot--neutral {
  color: var(--color-text-dim, hsl(var(--muted-foreground)));
}

.cmm-status-dot--pulse {
  animation: cmm-status-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes cmm-status-dot-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}
