html.site-skeleton-pending,
html.site-skeleton-active {
   background: #ffffff;
}

html.site-skeleton-pending body > *:not(.site-skeleton-loader),
html.site-skeleton-active body > *:not(.site-skeleton-loader) {
   visibility: hidden !important;
}

html.site-skeleton-pending body::before {
   content: "";
   position: fixed;
   inset: 0;
   z-index: 2147482999;
   background:
      linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent) -100% 0 / 50% 100% no-repeat,
      linear-gradient(#edf1f5 0 0) 24px 24px / calc(100% - 48px) 48px no-repeat,
      linear-gradient(#edf1f5 0 0) 24px 96px / calc(100% - 48px) 220px no-repeat,
      linear-gradient(#edf1f5 0 0) 24px 348px / 46% 28px no-repeat,
      linear-gradient(#edf1f5 0 0) 24px 396px / calc(100% - 48px) 14px no-repeat,
      linear-gradient(#edf1f5 0 0) 24px 424px / 72% 14px no-repeat,
      #ffffff;
   pointer-events: none;
}

.site-skeleton-loader {
   position: fixed;
   inset: 0;
   z-index: 2147483000;
   overflow: hidden;
   background: #ffffff;
   pointer-events: none;
   visibility: visible !important;
   opacity: 1;
   transition: opacity 180ms ease;
}

.site-skeleton-loader.is-hiding {
   opacity: 0;
}

.site-skeleton-item {
   position: absolute;
   overflow: hidden;
   background: #edf1f5;
   border-radius: 6px;
   box-shadow: inset 0 0 0 1px rgba(10, 89, 160, 0.03);
}

.site-skeleton-item::after {
   content: "";
   position: absolute;
   inset: 0;
   transform: translateX(-100%);
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
   animation: siteSkeletonShimmer 1.2s infinite;
}

.site-skeleton-circle {
   border-radius: 50%;
}

.site-skeleton-pill {
   border-radius: 999px;
}

.site-skeleton-line {
   height: 12px !important;
   border-radius: 999px;
}

@keyframes siteSkeletonShimmer {
   100% {
      transform: translateX(100%);
   }
}

@media (prefers-reduced-motion: reduce) {
   .site-skeleton-item::after {
      animation: none;
   }
}