// Tools :: Cosmetics

@mixin fabric-linear-gradient($direction, $color-stops...) {
  background: nth(nth($color-stops, 1), 1);
  background: linear-gradient(legacy-direction($direction), $color-stops);
  background: linear-gradient($direction, $color-stops);
}

@mixin fabric-stripes(
  $angle: 0,
  $bar-width: 10px,
  $color1: red,
  $color2: black
) {
  background: repeating-linear-gradient(
    $angle,
    $color1,
    $color1 $bar-width,
    $color2 $bar-width,
    $color2 $bar-width * 2
  );
}

// @include animation('rangeAnimation 500s infinite');
@mixin animation($animate...) {
  $max: length($animate);
  $animations: '';

  @for $i from 1 through $max {
    $animations: #{$animations + nth($animate, $i)};

    @if $i < $max {
      $animations: #{$animations + ', '};
    }
  }

  -webkit-animation: $animations;
  -moz-animation: $animations;
  -o-animation: $animations;
  animation: $animations;
}

/// @include keyframes(rangeAnimation) { 0% { ... } };
@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }

  @-moz-keyframes #{$animationName} {
    @content;
  }

  @-o-keyframes #{$animationName} {
    @content;
  }

  @keyframes #{$animationName} {
    @content;
  }
}