@keyframes gl-spinner-rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@mixin gl-spin {
  animation: gl-spinner-rotate 2s infinite linear;
}

$gl-animate-skeleton-loader-max-width: 64 * $grid-size;
// Adds a sliding shining wave to element's background to indicate loading
//
// USAGE NOTES: if you're using `gl-max-w-xx` you'll need to add
// important (e.g. `gl-max-w-20!`). This is because `.gl-animate-skeleton-loader` already
// has a `max-width` statement, and we need to override it. You can override it
// only with lower numbers. Width rules (`gl-w-xx`) don't need an override, you
// can use them as-is. If you want to "synchronize" two elements next to each
// other, try adding `animation-delay` to offset elements.
//
// Simple example:
// ```html
// <div>
//   <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3"></div>
//   <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3"></div>
//   <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3"></div>
// </div>
// ```
//
// More complex example:
// (with different shapes and an animation delay for offset elements):
// ```html
// <div class="gl-display-flex gl-flex-direction-column gl-gap-2 gl-w-30">
//   <div class="gl-animate-skeleton-loader gl-h-8 gl-rounded-base gl-mb-4"></div>
//   <div class="gl-display-flex gl-flex-direction-row gl-gap-2">
//     <div class="gl-animate-skeleton-loader gl-h-8 gl-w-8 gl-rounded-full"></div>
//     <div class="gl-flex-grow-1" style="animation-delay: 100ms">
//       <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-2"></div>
//       <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-2"></div>
//       <div class="gl-animate-skeleton-loader gl-display-inline-block gl-h-4 gl-w-10 gl-rounded-base gl-my-2"></div>
//       <div class="gl-animate-skeleton-loader gl-display-inline-block gl-h-4 gl-w-10 gl-rounded-base gl-my-2" style="animation-delay: 250ms"></div>
//     </div>
//   </div>
// </div>
// ```
@mixin gl-animate-skeleton-loader {
  $max-width: $gl-animate-skeleton-loader-max-width;

  overflow: hidden;
  max-width: $max-width;
  background-size: $max-width 100%;
  background-position: -$max-width 0;
  background-color: $gray-100;
  background-image: linear-gradient(to right,
  $gray-100 0,
  $gray-50 23%,
  $gray-50 27%,
  $gray-100 50%);
  background-repeat: no-repeat;

  // Enable animation only for users who don't have a preference
  // for reduced animation
  @media (prefers-reduced-motion: no-preference) {
    animation: gl-keyframes-skeleton-loader 2.5s linear;
    animation-delay: inherit;
    animation-iteration-count: 3;
  }
}

@keyframes gl-keyframes-skeleton-loader {
  // Skeleton loader animation basically moves background from `x=-100%` to
  // `x=+100%`, so that at the beginning and at the end of the animation loop no
  // gradient is leaking to the visible part. But we can't use percent-based
  // positioning, for animation speed would be different for elements with
  // different width. So we use a predefined max-width for
  // `.gl-animate-skeleton-loader`, and use its value for `-100%` and `+100%`
  // positioning.

  0% {
    background-position-x: -$gl-animate-skeleton-loader-max-width;
  }

  100% {
    background-position-x: $gl-animate-skeleton-loader-max-width;
  }
}