.transaction-status .transaction-status__steps {
  color: var(--boxel-dark);
  font: 600 var(--boxel-font);
  letter-spacing: var(--boxel-lsp-xs);
}

.transaction-status .transaction-status__steps > li > span {
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto;
  gap: var(--boxel-sp-xs) var(--boxel-sp);
}

.transaction-status__step-title {
  max-width: 17.5rem; /* 280px */
}

.transaction-status__step-status {
  justify-self: end;
  display: flex;
  align-items: center;
  font: 400 var(--boxel-font-xs);
  letter-spacing: var(--boxel-lsp-lg);
}

.transaction-status__spinner {
  margin-left: var(--boxel-sp-xxs);
}

/* these have to interfere with boxel classes */
.transaction-status__steps .boxel-progress-steps__item + .boxel-progress-steps__item::before {
  height: var(--boxel-sp-xxxl);
}

.transaction-status__steps .boxel-progress-steps__item-bullet {
  display: flex;
  align-items: center;
  justify-content: center;
}

.transaction-status__delay {
  color: var(--boxel-purple-500);
}

.transaction-status__delay a {
  text-decoration: underline;
}