.prs-skeleton {
  --skel-width: 100%;
  --skel-height: 1rem;
  --skel-bg: currentColor;
  --skel-fg: var(--prs-c-white);
  --skel-radius: var(--prs-radius-box);
  --skel-shine: color-mix(in oklab, var(--skel-fg), transparent 30%);
  width: var(--skel-width);
  height: var(--skel-height);
  background-color: color-mix(in oklab, var(--skel-bg), transparent 90%);
  background-image: linear-gradient(180deg, transparent 0%, transparent 10%, var(--skel-shine) 50%, transparent 90%, transparent 100%);
  background-size: 200% 200%;
  background-position: 0 100%;
  border-radius: var(--skel-radius);
  will-change: background-position;
  @media (prefers-reduced-motion: no-preference) {
    animation: prs-skeleton 1.5s ease-in-out infinite;
  }
}

@keyframes prs-skeleton {
  0% {
    background-position: 0 -200%;
  }
  100% {
    background-position: 0 0%;
  }
}