/*
 * Skeleton loader (shimmer placeholder) for <img> tags.
 *
 * Usage: add class="skeleton-img" to any <img>. A shimmering grey
 * placeholder shows as the CSS background of the image box until the
 * image finishes loading (or fails), at which point skeleton-loader.js
 * adds "is-loaded" and the shimmer stops. No wrapper <div> needed -
 * this relies on the fact that a browser paints an <img>'s background
 * the moment its box is laid out, well before the picture itself has
 * decoded, and the loaded photo then simply paints over it.
 *
 * Works the same in the storefront and the admin panel - both load
 * this one file (see header-ui.php / admin/partials/header.php) so a
 * fix here does not need to be duplicated per area.
 */

.skeleton-img {
  background-color: #e9e9e9;
  background-image: linear-gradient(110deg, #ececec 8%, #f6f6f6 20%, #ececec 33%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  min-height: 40px; /* keeps a placeholder box visible even before width/height are known */
}

.skeleton-img.is-loaded {
  animation: none;
  background-image: none;
  background-color: transparent;
  min-height: 0;
}

/* Respect users who've asked the OS/browser to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  .skeleton-img {
    animation: none;
    background-image: none;
    background-color: #ececec;
  }
}

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

/*
 * Generic block skeleton (for anything that isn't an <img> but still
 * needs a "content coming" placeholder - e.g. a stat card value while
 * a widget's async fetch is in flight). Optional, opt-in via
 * class="skeleton-block"; not applied anywhere automatically.
 */
.skeleton-block {
  background-color: #e9e9e9;
  background-image: linear-gradient(110deg, #ececec 8%, #f6f6f6 20%, #ececec 33%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  color: transparent !important;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}