// Background image property for support with adding multiple background images with a gradients.

@mixin background-image(
  $image-1       , $image-2: false,
  $image-3: false, $image-4: false,
  $image-5: false, $image-6: false,
  $image-7: false, $image-8: false,
  $image-9: false, $image-10: false
) {
  $images: compact($image-1, $image-2,
           $image-3, $image-4,
           $image-5, $image-6,
           $image-7, $image-8,
           $image-9, $image-10);

  $assets:    ();
  $gradients: ();
  $count: 0;

  //Find all asset images in list
  @for $i from 1 through length($images) {
    $type: type-of(nth($images, $i));

    @if $type == list {
      $count: $count + 1;
    }

    @else if $type == string {
      $assets: join($assets, nth($images, $i), comma);
    }
  }

  // Find all gradients in list
  @for $i from 1 through length($images) {
    $type: type-of(nth($images, $i));

    @if $type == list {
      $gradients: append($gradients, nth($images, $i), comma);
    }
  }


  @if $assets {
    @if $count >= 1 {
      background-image: $assets, render-gradients($gradients, webkit);
      background-image: $assets, render-gradients($gradients, moz);
      background-image: $assets, render-gradients($gradients, ms);
      background-image: $assets, render-gradients($gradients, o);
      background-image: $assets, render-gradients($gradients);
    }
    @else {
      background-image: $assets;
    }
  }
  @else {
    @if $count >= 1 {
      background-image: render-gradients($gradients, webkit);
      background-image: render-gradients($gradients, moz);
      background-image: render-gradients($gradients, ms);
      background-image: render-gradients($gradients, o);
      background-image: render-gradients($gradients);
    }
  }
}

@function render-gradients($gradients, $vendor: false) {
  @if length($gradients) == 1 {
    $vendor-gradients: false;
    @if $vendor {
      $vendor-gradients: -#{$vendor}-linear-gradient($gradients);
    }
    @else if $vendor == false {
      $vendor-gradients: "linear-gradient(#{$gradients})";
      $vendor-gradients: unquote($vendor-gradients);
    }
    @return $vendor-gradients;
  }

  @else if length($gradients) >= 2 {
    $vendor-gradients: ();
    @for $i from 1 through length($gradients) {
      @if $vendor {
        @if $vendor-gradients == () {
          $vendor-gradients: -#{$vendor}-linear-gradient(nth($gradients, $i));
        }
        @else {
          $vendor-gradients: $vendor-gradients, -#{$vendor}-linear-gradient(nth($gradients, $i));
        }
      }
      @else if $vendor == false {
        $vendor-gradients: $vendor-gradients, unquote("linear-gradient(#{nth($gradients, $i)})");
      }
    }
    @return $vendor-gradients;
  }
}

//Examples:
   //@include background-image(url("/images/a.png"), linear-gradient(#ffff00, #999));
   //@include background-image(url("/images/a.png"), url("/images/b.png"), url("/images/c.png"), linear-gradient(#ffff00 10%, #000 20%));