/**
* @prop --vm-skeleton-color: The color of the skeleton.
* @prop --vm-skeleton-sheen-color: The sheen color when the skeleton is in its loading state.
* @prop --vm-skeleton-z-index: The position in the UI z-axis stack inside the player.
*/
vime-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  min-height: 1rem;
  z-index: var(--vm-skeleton-z-index);
}
@keyframes sheen {
  0% {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
vime-skeleton.hidden {
  opacity: 0;
  visibility: hidden;
  transition: var(--vm-fade-transition);
  pointer-events: none;
}
vime-skeleton .indicator {
  flex: 1 1 auto;
  background: var(--vm-skeleton-color);
}
vime-skeleton.sheen .indicator {
  background: linear-gradient(270deg, var(--vm-skeleton-sheen-color), var(--vm-skeleton-color), var(--vm-skeleton-color), var(--vm-skeleton-sheen-color));
  background-size: 400% 100%;
  background-size: 400% 100%;
  animation: sheen 8s ease-in-out infinite;
}