.spinnerWrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  filter: drop-shadow(0 0 3px rgba(var(--accent-primary-rgb), 0.4));
}

.spinner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(currentColor 225deg, transparent 225deg);
  mask: radial-gradient(circle closest-side, transparent calc(100% - 2px), black calc(100% - 2px));
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 2px), black calc(100% - 2px));
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.pulse {
  display: inline-flex;
  animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
  .pulse {
    animation: none;
  }
}
