kodadot/nft-gallery

@keyframes cardHoverIn {
  0% {
    box-shadow: none;
  }
  100% {
    box-shadow: var(--card-box-shadow);
  }
}

@keyframes cardHoverOut {
  0% {
    box-shadow: var(--card-box-shadow);
  }
  100% {
    box-shadow: none;
  }
}

@mixin shineEffect($shineColor, $shineHover, $overChild: true) {
  @apply relative overflow-hidden;

  &::before,
  &::after {
    content: '';
    @apply absolute top-0 h-full;
    background-color: $shineColor;
    transform: skewX(-30deg);
    transition: background-color 0.3s;
    @apply z-10;
  }

  &::before {
    left: -120%;
    width: 15%;
    animation: shine1 3s ease-in-out infinite;
  }

  &::after {
    left: -115%;
    width: 3%;
    animation: shine2 3s ease-in-out infinite;
  }

  &:hover {
    &::before,
    &::after {
      background-color: $shineHover;
    }
  }

  @if not $overChild {
    > :first-child {
      @apply z-20;
    }
  }
}


@keyframes shine1 {
  0% { left: -118%; }
  100% { left: 112%; }
}

@keyframes shine2 {
  0% { left: -100%; }
  100% { left: 130%; }
}