.uploads-show-container {
  max-width: 42rem; /* Note: bespoke value */
  margin-inline: auto;

  & h2 { margin-bottom: var(--spacing-8); }
}

.uploads-show-spinner {
  animation: spin 1s linear infinite;
  border-radius: var(--corner-radius-full);
  height: 4rem; /* Note: bespoke value */
  width: 4rem; /* Note: bespoke value */
  border-bottom: var(--stroke-weight-2) solid var(--border-default);
  margin-inline: auto;
  margin-bottom: var(--spacing-24);
}

.uploads-show-steps,
.uploads-show-steps--done {
  text-align: left;
  max-width: 20rem; /* Note: bespoke value */
  margin-inline: auto;

  & > * + * { margin-top: var(--spacing-8); }
}
.uploads-show-steps { margin-top: var(--spacing-32); }
.uploads-show-steps--done { margin-top: var(--spacing-24); }

.uploads-show-step {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}
.uploads-show-step-check-icon {
  width: 1rem;
  height: 1rem;
  color: var(--text-primary);
  flex-shrink: 0;
}
.uploads-show-step-done-label {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-primary);
}
html.theme-dark .uploads-show-step-done-label { color: var(--text-primary); }

.uploads-show-step-current-dot {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  background-color: var(--background-surface-2);
  width: 0.75rem; /* Note: bespoke value */
  height: 0.75rem; /* Note: bespoke value */
  border-radius: var(--corner-radius-full);
  flex-shrink: 0;
  margin-left: var(--spacing-2);
}
.uploads-show-step-current-label {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-primary);
  font-weight: var(--font-weight-500);
}

.uploads-show-step-pending-dot {
  background-color: var(--background-hover);
  width: 0.75rem; /* Note: bespoke value */
  height: 0.75rem; /* Note: bespoke value */
  border-radius: var(--corner-radius-full);
  flex-shrink: 0;
  margin-left: var(--spacing-2);
}

.uploads-show-step-pending-label {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-tertiary);
}

.uploads-show-success-icon-wrapper,
.uploads-show-fail-icon-wrapper {
  width: 4rem; /* Note: bespoke value */
  height: 4rem; /* Note: bespoke value */
  border-radius: var(--corner-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: var(--spacing-24);
}
.uploads-show-success-icon-wrapper { background-color: var(--background-surface-2); }
.uploads-show-fail-icon-wrapper { background-color: var(--background-surface-2); }
html.theme-dark .uploads-show-success-icon-wrapper {
  background-color: color-mix(in oklab, var(--color-spring-green-30) 40%, transparent);
}
html.theme-dark .uploads-show-fail-icon-wrapper {
  background-color: color-mix(in oklab, var(--color-orange-600) 40%, transparent);
}

.uploads-show-success-icon,
.uploads-show-fail-icon {
  width: 2rem; /* Note: bespoke value */
  height: 2rem; /* Note: bespoke value */
}
.uploads-show-success-icon { color: var(--text-primary); }
.uploads-show-fail-icon { color: var(--text-risk-factor); }

.uploads-show-redirect-note {
  color: var(--text-tertiary);
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  margin-top: var(--spacing-24);
}

.uploads-show-noscript-button,
.uploads-show-retry-button {
  display: inline-block;
  background-color: var(--background-surface-2);
  color: var(--text-primary);
  font-weight: var(--font-weight-600);
  padding-block: var(--spacing-8);
  padding-inline: var(--spacing-24);
  border-radius: var(--corner-radius-sm);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;

  &:hover { background-color: var(--background-surface-2); }
}
.uploads-show-noscript-button { margin-top: var(--spacing-16); }

.uploads-show-fail-message {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-24);
}