/**
 * @file
 * Core AJAX progress, in the theme's colours: a small spinner inside a button
 * (core inserts it right after the input), or a centred one for fullscreen.
 */

@keyframes dds-spin {
  to {
    transform: rotate(360deg);
  }
}

:where(.gdrfad-dds) .ajax-progress-throbber,
.gdrfad-dds-embedded .ajax-progress-throbber {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-gap-sm);
  color: var(--primary-primary);
}

:where(.gdrfad-dds) .ajax-progress-throbber .throbber,
.gdrfad-dds-embedded .ajax-progress-throbber .throbber {
  inline-size: 16px;
  block-size: 16px;
  padding: 0;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  background: none;
  animation: dds-spin 0.8s linear infinite;
}

:where(.gdrfad-dds) .ajax-progress-throbber .message,
.gdrfad-dds-embedded .ajax-progress-throbber .message {
  padding: 0;
  font-size: var(--font-size-help);
}

:where(.gdrfad-dds) .dds-button-wrap > .ajax-progress-throbber,
.gdrfad-dds-embedded .dds-button-wrap > .ajax-progress-throbber {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 12px;
  translate: 0 -50%;
  pointer-events: none;
}

:where(.gdrfad-dds) .dds-button-wrap > .dds-button--primary ~ .ajax-progress-throbber,
.gdrfad-dds-embedded .dds-button-wrap > .dds-button--primary ~ .ajax-progress-throbber {
  color: var(--primary-on-primary);
}

/* The spinner takes the icon's place. */
:where(.gdrfad-dds) .dds-button-wrap:has(> .ajax-progress-throbber) > .dds-button-wrap__icon,
.gdrfad-dds-embedded .dds-button-wrap:has(> .ajax-progress-throbber) > .dds-button-wrap__icon {
  visibility: hidden;
}

:where(.gdrfad-dds) .ajax-progress-fullscreen,
.gdrfad-dds-embedded .ajax-progress-fullscreen {
  position: fixed;
  z-index: 1000;
  inset: 0;
  inline-size: 56px;
  block-size: 56px;
  margin: auto;
  padding: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-surface);
  box-shadow: var(--elevation-3);
}

:where(.gdrfad-dds) .ajax-progress-fullscreen::after,
.gdrfad-dds-embedded .ajax-progress-fullscreen::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 3px solid var(--primary-primary);
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: dds-spin 0.8s linear infinite;
}