:root {
  --loading-status-gap: var(--space-2);
  --loading-status-font: var(--font-type-label-strong);
  --loading-spinner-size: var(--size-18);
  --loading-spinner-radius: var(--radius-full);
  --loading-spinner-border: var(--border-2) solid currentColor;
  --loading-spinner-animation: loading-spin var(--duration-800) linear infinite;
  --loading-spinner-rotation: rotate(var(--rotate-full));
}

.loading-status {
  display: flex;
  align-items: center;
  gap: var(--loading-status-gap);
  margin: 0;
  font: var(--loading-status-font);
}

.loading-status[hidden] { display: none; }

.loading-spinner,
.button-control[aria-busy="true"]::after {
  content: "";
  box-sizing: border-box;
  display: inline-block;
  flex: none;
  inline-size: var(--loading-spinner-size);
  block-size: var(--loading-spinner-size);
  border: var(--loading-spinner-border);
  border-inline-end-color: var(--color-clear);
  border-radius: var(--loading-spinner-radius);
  animation: var(--loading-spinner-animation);
}

@keyframes loading-spin { to { transform: var(--loading-spinner-rotation); } }
@media (prefers-reduced-motion: reduce) {
  .loading-spinner, .button-control[aria-busy="true"]::after { animation: none; }
}