// generate rotational and position keyframes for loading spinners
// @mixin     generate-loader-keyframes
@mixin generate-loader-keyframes {
  @if not $CONFIG_DISABLE_STYLEGUIDE_SPRITES {
    // generate rotating keyframes
    @include -generate-loader-keyframes-360;
    // generate specific keyframes
    @each $size, $values in $CONFIG_LOADERS {
      @if $size and $values {
        @each $context in (1 2) {
          $name: unquote('#{$size}-#{$context}');
          $icon: nth-cyclic(map-get($values, default), $context);
          $position: -archetype-sprite-position($CONFIG_SPRITE_LOADERS, $icon);
          $sprite-file: -archetype-sprite-file($CONFIG_SPRITE_LOADERS, $icon);
          $width: -archetype-image-width($sprite-file);
          $height: -archetype-image-height($sprite-file);
          @include -generate-loader-keyframes-position($name, $position, $width, $height);
        }
      }
    }
  }
}

// generate rotational keyframes for loading spinners
// @mixin     -generate-loader-keyframes-360
// @private
@mixin -generate-loader-keyframes-360 {
  @include do-once("archetype/ui/generate-keyframe/#{$CONFIG_KEYFRAME_LOADERS}") {
    @include keyframes(archetype-namespace($CONFIG_KEYFRAME_LOADERS)) {
      from { @include rotate(0deg); }
      to { @include rotate(360deg); }
    }
  }
}

// generate position keyframes for loading spinners
// @mixin     -generate-loader-keyframes-position
// @private
// @param     $name {String} the name for this keyframe
// @param     $position {List} the background-position of the spinner image
// @param     $width {Number} the width of the spinner image
// @param     $height {Number} the height of the spinner image
@mixin -generate-loader-keyframes-position($name, $position, $width, $height) {
  $name: unquote('#{archetype-namespace($CONFIG_KEYFRAME_LOADERS)}-position-#{$name}');
  @include do-once("archetype/ui/generate-keyframe/#{$name}") {
    @include keyframes($name) {
      from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
    }
  }
}

// a helper to generate the required CSS for the position keyframe
// @mixin     -generate-loader-keyframes-position-css
// @private
// @param     $position {List} the background-position of the spinner image
// @param     $width {Number} the width of the spinner image
// @param     $height {Number} the height of the spinner image
@mixin -generate-loader-keyframes-position-css($position, $width, $height) {
  background-position: $position;
  width: $width;
  height: $height;
  margin-left: $width / -2;
  margin-top: $height / -2;
}