/* One pending presentation across React and Razor, without changing hierarchy. */
[data-action-state='pending'] { position: relative; max-width: 100%; cursor: progress; }
[data-action-state='pending'] > :not(.pl-action__pending) { visibility: hidden !important; }
.pl-action__pending {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: var(--pl-space-2); padding: var(--pl-space-2) var(--pl-space-3);
  pointer-events: none; color: inherit; font: inherit; border-radius: inherit;
}
.pl-action__pending-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-action__pending .pl-action__spinner {
  display: block; flex: 0 0 16px; width: 16px; height: 16px; box-sizing: border-box;
  border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%;
  animation: pl-action-pending-spin 800ms linear infinite;
}
.pl-action__pending-creative { flex: 0 0 20px; width: 20px; height: 20px; }
.pl-action__pending-creative > svg { width: 100%; height: 100%; }
[data-action-state='pending'] .pl-action__pending .pl-action__pending-creative .pl-icon-motion__sparkles {
  transform-origin: center; animation: pl-action-pending-sparkle 1400ms ease-in-out infinite;
}
.pl-action--icon-only .pl-action__pending { padding: 0; }
.pl-action--icon-only .pl-action__pending-label { display: none; }
.pl-action-announcement { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pl-action-error { color: var(--pl-status-danger-text, #a32d21); margin: var(--pl-space-2) 0; font-size: var(--pl-font-size-14); }
@keyframes pl-action-pending-spin { to { transform: rotate(360deg); } }
@keyframes pl-action-pending-sparkle { 50% { transform: scale(.86); opacity: .65; } }
@media (prefers-reduced-motion: reduce) {
  .pl-action__pending .pl-action__spinner, [data-action-state='pending'] .pl-action__pending .pl-action__pending-creative .pl-icon-motion__sparkles { animation: none; }
}