/* Size both states from the wider label before the request starts. The loading
   reservation includes the spinner, its 8px gap, and symmetric side clearance. */
button.pending-button {
  min-inline-size: min-content;
}
.pending-button .pending-button__layout {
  display: inline-grid;
  grid-template-areas: "content";
  place-items: center;
  min-inline-size: max-content;
  vertical-align: middle;
}
.pending-button .pending-button__layout::before,
.pending-button .pending-button__layout::after,
.pending-button .pending-button__content {
  grid-area: content;
}
.pending-button .pending-button__layout::before,
.pending-button .pending-button__layout::after {
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
}
.pending-button .pending-button__layout::before {
  content: attr(data-pending-loading-label);
  /* Loading group plus a spinner + 8px of clearance on each side. */
  padding-inline: calc(1.5 * max(17px, 1.1em) + 12px);
}
.pending-button .pending-button__layout::after {
  content: attr(data-pending-idle-label);
}
/* Do not pick up legacy button span typography in either state. */
.pending-button .pending-button__layout,
.pending-button .pending-button__content {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.pending-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  --pending-gap: 8px;
  gap: var(--pending-gap);
  font: inherit;
  color: inherit;
  vertical-align: middle;
}

/* Keep the TRAIN Start label at its idle line height; the centered ring can
   extend into the existing button padding without growing the control. */
[data-train-start-button-copy] .pending-action {
  block-size: 1em;
}

.pending-action__label {
  min-width: 0;
}

/* Legacy button span rules must not resize the pending label or its em-sized ring. */
[aria-busy="true"] .pending-action,
[aria-busy="true"] .pending-action > span {
  font: inherit;
  letter-spacing: inherit;
}

.pending-action__spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  min-width: 17px;
  min-height: 17px;
  --pending-ring: 2.2px;
  border-radius: 50%;
  background: currentColor;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg, #000 1deg 70deg, #0000 71deg 90deg),
    radial-gradient(farthest-side, #0000 calc(100% - var(--pending-ring) - 1px), #000 calc(100% - var(--pending-ring)));
  mask:
    repeating-conic-gradient(#0000 0deg, #000 1deg 70deg, #0000 71deg 90deg),
    radial-gradient(farthest-side, #0000 calc(100% - var(--pending-ring) - 1px), #000 calc(100% - var(--pending-ring)));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  animation: pending-action-turn 1s infinite;
}

@keyframes pending-action-turn {
  to { transform: rotate(0.5turn); }
}

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