:root {
  --media-skeleton-base: rgba(139, 139, 133, 0.18);
  --media-skeleton-glint: rgba(255, 255, 255, 0.58);
}

.dom-skeleton-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 18;
  width: 100%;
  height: var(--dom-skeleton-height, 100vh);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 220ms ease;
}

html.skeleton-dom-active .dom-skeleton-layer {
  opacity: 1;
  visibility: visible;
}

html.skeleton-dom-active.skeleton-leaving .dom-skeleton-layer {
  opacity: 0;
}

.dom-skeleton-block {
  --dom-skeleton-base: rgba(30, 30, 28, 0.12);
  --dom-skeleton-glint: rgba(255, 255, 255, 0.72);
  position: absolute;
  left: var(--dom-skeleton-left);
  top: var(--dom-skeleton-top);
  z-index: 1;
  width: var(--dom-skeleton-width);
  height: var(--dom-skeleton-height);
  border-radius: var(--dom-skeleton-radius, 4px);
  background-color: var(--dom-skeleton-base);
  background-image: linear-gradient(
    105deg,
    transparent 25%,
    var(--dom-skeleton-glint) 44%,
    transparent 63%
  );
  background-position: 100% 0;
  background-size: 240% 100%;
  background-repeat: no-repeat;
  animation: dom-skeleton-shimmer 1.35s ease-in-out infinite;
  will-change: background-position;
}

.dom-skeleton-block--text,
.dom-skeleton-block--control {
  z-index: 2;
}

html.skeleton-dom-active:not(.skeleton-leaving)
  [data-dom-skeleton-text] {
  color: transparent !important;
  text-decoration-color: transparent !important;
  text-shadow: none !important;
}

html.skeleton-dom-active:not(.skeleton-leaving)
  [data-dom-skeleton-text]::before,
html.skeleton-dom-active:not(.skeleton-leaving)
  [data-dom-skeleton-text]::after {
  color: transparent !important;
}

html.skeleton-dom-active:not(.skeleton-leaving)
  [data-dom-skeleton-media],
html.skeleton-dom-active:not(.skeleton-leaving)
  [data-dom-skeleton-control] {
  opacity: 0 !important;
}

main img[data-skeleton-state="loading"],
main video[data-skeleton-state="loading"] {
  background-color: var(--media-skeleton-base);
  background-image: linear-gradient(
    105deg,
    transparent 25%,
    var(--media-skeleton-glint) 44%,
    transparent 63%
  );
  background-position: 100% 0;
  background-size: 240% 100%;
  background-repeat: no-repeat;
  animation: media-skeleton-shimmer 1.35s ease-in-out infinite;
}

main img[data-skeleton-state="error"],
main video[data-skeleton-state="error"] {
  background: var(--media-skeleton-base);
}

@keyframes dom-skeleton-shimmer {
  to {
    background-position: -140% 0;
  }
}

@keyframes media-skeleton-shimmer {
  to {
    background-position: -140% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dom-skeleton-block,
  main img[data-skeleton-state="loading"],
  main video[data-skeleton-state="loading"] {
    animation: none;
  }

  .dom-skeleton-layer {
    transition-duration: 1ms;
  }
}