// Set Dimensions
@mixin dimensions($width: null, $height: $width) {
  width: $width;
  height: $height;
}

// Sprite to Animate Mixin
// https://eliorshalev.github.io/sprite-spirit/
@mixin spriteSpirit($name, $url, $vertical, $width, $height, $frameNum, $duration: .8, $iteration: 0, $reverse: false) {
  $single-Y-frame: $height / $frameNum;
  $single-X-frame: $width / $frameNum;

  background-image: url($url);
  background-repeat: no-repeat;
  animation: #{$name} steps($frameNum);
  animation-duration: $duration + s;

  @if $iteration == 0 {
    animation-iteration-count: infinite;
  } @else {
    animation-iteration-count: $iteration;
  }

  @if $reverse == true {
    animation-direction: reverse;
  } @else {
    animation-direction: normal;
  }

  @if $vertical == true {
    @include dimensions($width: $width, $height: $single-Y-frame);
    background-position: 0 top;
  } @else {
    @include dimensions($width: $single-X-frame, $height: $height);
    background-position: left 0;
  }

  @keyframes #{$name} {
    to {
      @if $vertical == true {
        background-position: 0 -#{$height};
      } @else {
        background-position: -#{$width} 0;
      }
    }
  }
}
