.ui-search-page .ui-search-state {
  min-height: 260px;
  display: grid;
  padding: 48px 24px;
  place-items: center;
  align-content: center;
  border: 1px dashed #cbd5df;
  border-radius: 12px;
  background: var(--ui-color-white);
  text-align: center;
}

.ui-search-page .ui-search-state > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  color: var(--ui-color-white);
  background: var(--ui-color-teal-dark);
  font-size: 26px;
  font-weight: var(--ui-font-weight-bold);
}

.ui-search-page .ui-search-state.is-error > span {
  background: var(--ui-color-orange);
}

.ui-search-page .ui-search-state h2 {
  margin: 14px 0 5px;
  color: var(--ui-color-ink);
}

.ui-search-page .ui-search-state p {
  margin: 0;
  color: var(--ui-color-muted);
}

.ui-search-page .ui-search-spinner {
  border: 5px solid #d8eeee;
  border-top-color: var(--ui-color-teal-dark);
  animation: ui-search-spin 800ms linear infinite;
}

@keyframes ui-search-spin {
  to {
    transform: rotate(360deg);
  }
}

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