.sdsp-preloader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sdsp-bg, #ffffff);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--sdsp-fade-time, 450ms) ease, visibility var(--sdsp-fade-time, 450ms) ease;
  pointer-events: all;
}

.sdsp-preloader.sdsp-preloader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sdsp-preloader__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(70vw, 480px);
}

.sdsp-preloader__image {
  display: block;
  width: var(--sdsp-image-width, 120px);
  max-width: 70vw;
  height: auto;
}

.sdsp-preloader__spinner {
  display: block;
  width: 48px;
  height: 48px;
  border: 2px solid color-mix(in srgb, var(--sdsp-spinner, #111111) 20%, transparent);
  border-top-color: var(--sdsp-spinner, #111111);
  border-radius: 50%;
  animation: sdsp-spin 850ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .sdsp-preloader,
  .sdsp-preloader__spinner {
    transition: none;
    animation: none;
  }
}