@use '_sizes';

.draco-skeleton {
  position: relative;
  display: flex;
  overflow: hidden;
  background-color: #323232;
  border-radius: 4px;

  &.draco-skeleton--animation-shimmer {
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0) 100%
      );
      animation: shimmer 2.2s ease-in-out infinite;
      z-index: 1;
      transform: translateX(-100%) skewX(-20deg);
      transform-origin: top left;
    }
  }

   &.draco-skeleton--shape-circle {
      border-radius: var(--token-border-radius-full);
   }

   &.draco-skeleton--shape-square {
    border-radius: var(--token-border-radius-medium);
 }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) skewX(-20deg);
  }
  50% {
    transform: translateX(0) skewX(-20deg) scaleX(1.02);
  }
  100% {
    transform: translateX(100%) skewX(-20deg);
  }
}