.page-loader {
  align-items: center;
  background: rgb(248 250 252 / 92%);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  inset: 0;
  justify-content: center;
  min-height: 12rem;
  padding: 2rem;
  position: fixed;
  text-align: center;
  z-index: 2000;
}

.page-loader[hidden] {
  display: none;
}

.page-loader__animation {
  height: 8rem;
  width: 8rem;
}

.page-loader__fallback {
  height: 3rem;
  width: 3rem;
}

.page-loader__message {
  color: var(--color-text-secondary, #475569);
  font-weight: 500;
}

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