@use './mixins';

@include mixins.responsive using ($screen-size) {
  .anim-#{$screen-size}-none {
    animation: none !important;
  }

  .anim-group-#{$screen-size}-none > * {
    animation: none !important;
  }
}

@keyframes hover {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, var(--anim-translation-value));
  }
}

$anim-base-offset: -1s;

.anim-idle-hover {
  --anim-translation-value: var(--prj-spacing-1);
  --anim-offset: 0s;
  animation: hover 1.5s ease-in-out var(--anim-offset) infinite alternate;
}

.anim-idle-hover-group {
  & > * {
    @extend .anim-idle-hover;
  }

  @for $index from 1 through 20 {
    $anim-offset: $anim-base-offset * $index;
    & > :nth-child(#{$index}n) {
      --anim-offset: #{$anim-offset};
    }
  }
}

.anim-hover-zoom {
  transition: scale 0.2s;
  &:hover {
    scale: 1.05;
  }
}

.anim-hover-translate {
  --anim-translation-value: -5px;
  --anim-shadow-color: var(--prj-accent-bg);
  transition: translate 0.2s;

  &:hover {
    translate: var(--anim-translation-value) var(--anim-translation-value);
    box-shadow: calc(var(--anim-translation-value) * -1)
      calc(var(--anim-translation-value) * -1) 0px 0px var(--anim-shadow-color);
  }
}