#page-content .loading:is([data-loading-action], [data-loading-elapsed-only]),
.dialog-body .loading:is([data-loading-action], [data-loading-elapsed-only]) {
  padding: .75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .3rem .5rem;
}

#page-content .loading:is([data-loading-action], [data-loading-elapsed-only]) .av-loading-feedback,
.dialog-body .loading:is([data-loading-action], [data-loading-elapsed-only]) .av-loading-feedback {
  flex: 0 0 100%;
  margin-block-start: 0;
}

#page-content .loading .av-loading-feedback,
.dialog-body .loading .av-loading-feedback {
  display: block;
  margin-block-start: .45rem;
  color: var(--text-muted, #9ba8b4);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

:is(#page-content, .dialog-body, dialog.dialog, .app-shell #primary-navigation) [data-loading-feedback]:not(.loading) > .av-loading-feedback {
  display: block;
  margin-block-start: .3rem;
  color: var(--text-muted, #9ba8b4);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  #page-content .loading .av-loading-feedback,
  .dialog-body .loading .av-loading-feedback { transition: none; animation: none; }
  :is(#page-content, .dialog-body, dialog.dialog, .app-shell #primary-navigation) [data-loading-feedback]:not(.loading) > .av-loading-feedback { transition: none; animation: none; }
}