:root {
  --animate-duration: 1s;
}

sl-skeleton {
  --ske-bg: #eeedf1;
  --ske-wave-color: #fafbfe;
  --ske-wave-duration: 2.4s;
  background-color: var(--ske-bg);
  overflow: hidden;
  display: block;
  position: relative;
  border-radius: 4px;
}
sl-skeleton.animated::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--ske-wave-color), transparent);
  animation: wave var(--ske-wave-duration) infinite;
}
@media (prefers-reduced-motion: reduce) {
  sl-skeleton.animated::after {
    animation: none !important;
    background-color: var(--ske-bg) !important;
  }
}
@keyframes wave {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}