.skeletonLoader {
  --h: var(--skeleton-height, 14px);
  --r: var(--border-radius-md, 6px);
  --speed: var(--skeleton-speed, 1.2s);
  --skeleton-base: var(--opac-bg-default);
  --skeleton-sheen: var(--opac-bg-light);
  --skeleton-sheen-soft: color-mix(in srgb, var(--skeleton-sheen) 60%, var(--skeleton-base));
  position: relative;
  display: block;
  inline-size: var(--width, 100%);
  block-size: var(--h);
  width: var(--width, 100%);
  height: var(--h);
  overflow: hidden;
  border-radius: var(--r);
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 0%,
    var(--skeleton-base) 34%,
    var(--skeleton-sheen-soft) 45%,
    var(--skeleton-sheen) 50%,
    var(--skeleton-sheen-soft) 55%,
    var(--skeleton-base) 66%,
    var(--skeleton-base) 100%
  );
  background-size: 240% 100%;
  animation: shimmer var(--speed) linear infinite;
}

.invert {
  --skeleton-base: var(--opac-bg-default-invert);
  --skeleton-sheen: var(--opac-bg-light-invert);
}

.bar {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border-radius: inherit;
}

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

@media (prefers-reduced-motion: reduce) {
  .skeletonLoader {
    animation: none;
  }
}