:root {
  --animate-duration: 500ms;
}

:host {
  display: block;
}

sl-loading-screen .loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--sdx-color-sc-white);
  text-align: center;
}
sl-loading-screen .loading-container sl-empty-screen {
  width: 100%;
}
sl-loading-screen .loading-container.full-page {
  position: fixed;
  inset: 0;
  z-index: 900000;
}
sl-loading-screen .loading-container.overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  background-color: transparent;
  backdrop-filter: blur(16px) brightness(90%);
}
sl-loading-screen .animated {
  animation-duration: var(--animate-duration);
  animation-fill-mode: both;
}
sl-loading-screen .faster {
  animation-duration: calc(var(--animate-duration) / 2);
}
@media print, (prefers-reduced-motion: reduce) {
  sl-loading-screen .animated {
    animation-duration: 1ms;
    animation-iteration-count: 1;
    transition-duration: 1ms;
  }
  sl-loading-screen .animated[class*=Out] {
    opacity: 0;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
sl-loading-screen .fadeInUp {
  animation-name: fadeInUp;
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}
sl-loading-screen .fadeOutDown {
  animation-name: fadeOutDown;
}
sl-loading-screen .description {
  margin: 0;
  font-size: var(--sdx-font-body-base-fontSize);
  text-align: center;
}