@utility bg-shimmer {
  background-color: #e2e2e2;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 20%,
    rgba(255, 255, 255, 0) 40%
  );
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: -200% 0;
  animation: var(--animate-shimmer);
  @variant dark {
    background-color: #202225;
    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.06) 20%,
      rgba(255, 255, 255, 0) 40%
    );
  }
  @media (prefers-reduced-motion: reduce) {
    animation: none !important;
  }
}
@utility bg-shimmer-slow {
  @apply bg-shimmer animate-shimmer-slow;
  @media (prefers-reduced-motion: reduce) {
    animation: none !important;
  }
}
@utility bg-shimmer-diag {
  background-color: #e6e6e6;

  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.18) 25%,
    rgba(255, 255, 255, 0) 50%
  );
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-position: -150% -150%;
  animation: var(--animate-shimmer-diag);
  /* dark-mode variant */
  @variant dark {
    background-color: #202225;
    background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.06) 25%,
      rgba(255, 255, 255, 0) 50%
    );
  }
  @media (prefers-reduced-motion: reduce) {
    animation: none !important;
  }
}