$fill: var(--wds-color-white, var(--wsr-color-D80, #ffffff));
$color: var(--wds-internal-skeleton-group-color, #{$fill});

.skeleton-group {
  --wds-internal-skeleton-group-color: #{$fill};
  overflow: hidden;
  position: relative;

  & &__animator {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(
      to right,
      transparent 0%,
      $color 40%,
      $color 60%,
      transparent 100%
    );
    background-size: 200px 100%;
    background-repeat: no-repeat;
    animation: skeleton-group-wave 1s ease 0s infinite;
    opacity: 0.2;
    transform: translateX(-200px);
    will-change: transform;
  }

  @media (prefers-reduced-motion) {
    & &__animator {
      animation: none !important;
    }
  }
}

@keyframes skeleton-group-wave {
  0% {
    transform: translateX(-200px);
  }

  100% {
    transform: translateX(100%);
  }
}