/* DotsRing loading icon — replaces the circular .spinner used across portal. */ @keyframes cx-dots-ring-pulse { 0% { box-shadow: 0 -12px 0 0 currentColor, 8.49px -8.49px 0 0 color-mix(in srgb, currentColor 75%, transparent), 12px 0 0 0 color-mix(in srgb, currentColor 35%, transparent), 8.49px 8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), 0 12px 0 0 color-mix(in srgb, currentColor 25%, transparent), -8.49px 8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), -12px 0 0 0 color-mix(in srgb, currentColor 25%, transparent), -8.49px -8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent); } 12.5% { box-shadow: 0 -12px 0 0 color-mix(in srgb, currentColor 25%, transparent), 8.49px -8.49px 0 0 currentColor, 12px 0 0 0 color-mix(in srgb, currentColor 75%, transparent), 8.49px 8.49px 0 0 color-mix(in srgb, currentColor 35%, transparent), 0 12px 0 0 color-mix(in srgb, currentColor 25%, transparent), -8.49px 8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), -12px 0 0 0 color-mix(in srgb, currentColor 25%, transparent), -8.49px -8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent); } 25% { box-shadow: 0 -12px 0 0 color-mix(in srgb, currentColor 25%, transparent), 8.49px -8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), 12px 0 0 0 currentColor, 8.49px 8.49px 0 0 color-mix(in srgb, currentColor 75%, transparent), 0 12px 0 0 color-mix(in srgb, currentColor 35%, transparent), -8.49px 8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), -12px 0 0 0 color-mix(in srgb, currentColor 25%, transparent), -8.49px -8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent); } 37.5% { box-shadow: 0 -12px 0 0 color-mix(in srgb, currentColor 25%, transparent), 8.49px -8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), 12px 0 0 0 color-mix(in srgb, currentColor 25%, transparent), 8.49px 8.49px 0 0 currentColor, 0 12px 0 0 color-mix(in srgb, currentColor 75%, transparent), -8.49px 8.49px 0 0 color-mix(in srgb, currentColor 35%, transparent), -12px 0 0 0 color-mix(in srgb, currentColor 25%, transparent), -8.49px -8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent); } 50% { box-shadow: 0 -12px 0 0 color-mix(in srgb, currentColor 25%, transparent), 8.49px -8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), 12px 0 0 0 color-mix(in srgb, currentColor 25%, transparent), 8.49px 8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), 0 12px 0 0 currentColor, -8.49px 8.49px 0 0 color-mix(in srgb, currentColor 75%, transparent), -12px 0 0 0 color-mix(in srgb, currentColor 35%, transparent), -8.49px -8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent); } 62.5% { box-shadow: 0 -12px 0 0 color-mix(in srgb, currentColor 25%, transparent), 8.49px -8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), 12px 0 0 0 color-mix(in srgb, currentColor 25%, transparent), 8.49px 8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), 0 12px 0 0 color-mix(in srgb, currentColor 25%, transparent), -8.49px 8.49px 0 0 currentColor, -12px 0 0 0 color-mix(in srgb, currentColor 75%, transparent), -8.49px -8.49px 0 0 color-mix(in srgb, currentColor 35%, transparent); } 75% { box-shadow: 0 -12px 0 0 color-mix(in srgb, currentColor 35%, transparent), 8.49px -8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), 12px 0 0 0 color-mix(in srgb, currentColor 25%, transparent), 8.49px 8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), 0 12px 0 0 color-mix(in srgb, currentColor 25%, transparent), -8.49px 8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), -12px 0 0 0 currentColor, -8.49px -8.49px 0 0 color-mix(in srgb, currentColor 75%, transparent); } 87.5% { box-shadow: 0 -12px 0 0 color-mix(in srgb, currentColor 75%, transparent), 8.49px -8.49px 0 0 color-mix(in srgb, currentColor 35%, transparent), 12px 0 0 0 color-mix(in srgb, currentColor 25%, transparent), 8.49px 8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), 0 12px 0 0 color-mix(in srgb, currentColor 25%, transparent), -8.49px 8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), -12px 0 0 0 color-mix(in srgb, currentColor 25%, transparent), -8.49px -8.49px 0 0 currentColor; } 100% { box-shadow: 0 -12px 0 0 currentColor, 8.49px -8.49px 0 0 color-mix(in srgb, currentColor 75%, transparent), 12px 0 0 0 color-mix(in srgb, currentColor 35%, transparent), 8.49px 8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), 0 12px 0 0 color-mix(in srgb, currentColor 25%, transparent), -8.49px 8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), -12px 0 0 0 color-mix(in srgb, currentColor 25%, transparent), -8.49px -8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent); } } .spinner { width: 36px !important; height: 36px !important; border: none !important; border-radius: 0 !important; background: transparent !important; animation: none !important; position: relative; display: inline-block; color: var(--primary, #2563EB); flex-shrink: 0; vertical-align: middle; } .spinner::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: transparent; animation: cx-dots-ring-pulse 1s linear infinite; } @media (prefers-reduced-motion: reduce) { .spinner::before { animation: none; box-shadow: 0 -12px 0 0 currentColor, 8.49px -8.49px 0 0 color-mix(in srgb, currentColor 55%, transparent), 12px 0 0 0 color-mix(in srgb, currentColor 35%, transparent), 8.49px 8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), 0 12px 0 0 color-mix(in srgb, currentColor 25%, transparent), -8.49px 8.49px 0 0 color-mix(in srgb, currentColor 25%, transparent), -12px 0 0 0 color-mix(in srgb, currentColor 25%, transparent), -8.49px -8.49px 0 0 color-mix(in srgb, currentColor 55%, transparent); } }