@keyframes skeleton-sweep {
  0% {
    transform: translateX(-150%);
  }
  100% {
    transform: translateX(100%);
  }
}

.SkeletonLoader {
  background: var(--SkeletonLoader--background-color);
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    transform: translateX(-150%);
    width: 150%;
    height: 100%;
    will-change: transform;
    background: linear-gradient(
      90deg,
      transparent 20%,
      var(--SkeletonLoader--highlight-color) 40%,
      transparent 80%
    );
    animation: skeleton-sweep var(--SkeletonLoader--duration) infinite linear;
    opacity: 0.5;
  }

  &--unanimated {
    &::after {
      animation: none;
    }
  }
}