:root {
  --loading-fill-one: #747b8b;
  --loading-fill-two: #a8aebc;
  --loading-fill-three: #e3e4e7;
}

html[data-theme-mode='light'] {
  --loading-fill-one: #bfc4ca;
  --loading-fill-two: #d6d9dd;
  --loading-fill-three: #f7f9fa;
}

#loading-placeholder {
  display: none;
}

#loading-placeholder,
#loading-placeholder * {
  box-sizing: border-box;
}

#root:empty + #loading-placeholder,
#root:not(:has(> :not([id*='portal']))) + #loading-placeholder,
#loading-placeholder.force-visible {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

@keyframes loading-placeholder-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.plural-logo-skeleton-shimmer {
  width: 128px;
  height: 128px;
  -webkit-mask: url('/page-load-spinner/plural-logomark-only-white.svg') 0 0 /
    contain no-repeat;
  mask: url('/page-load-spinner/plural-logomark-only-white.svg') 0 0 / contain
    no-repeat;
  background: linear-gradient(
    130deg,
    var(--loading-fill-one) 30%,
    var(--loading-fill-three) 50%,
    var(--loading-fill-one) 70%
  );
  background-size: 200% 100%;
  animation: loading-placeholder-shimmer 1.6s linear infinite;
}