@use "../../variables/index" as *;

/**
* add an increasing transition delay to elements
* in a list using the element index
*
* $range: number of elements
* $el: html element
* $delay: time in seconds
* $lastIndex: max number of elements
* $pos: either top, right, bottom or left
* $size: height of the element
*/

@mixin make-el-increment($range, $el, $delay: 0.05s, $lastIndex: 100, $pos: top, $size: 40px) {

  @if $range > 0 {
  #{$el}:nth-child(#{$range}) {
    transition-delay: ($range * $delay);
    z-index: ($lastIndex - $range);
    #{$pos}: -340px;
  }
  @include make-el-increment(($range - 1), $el, $delay, $lastIndex, $pos, $size);
}
}