// 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:    false;
  $gradients: false;
  $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 {
      @if $assets == false {
        $assets: nth($images, $i);
      }

      @else {
        $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 {
      @if $gradients == false {
        $gradients: nth($images, $i);
      }
      @else {
        $gradients: $gradients, nth($images, $i);
      }
    }
  }

  @function render-gradients($gradients, $vendor: false) {
    @if $count == 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 $count >= 2 {
      $vendor-gradients: false;
      @for $i from 1 through length($gradients) {
        @if $vendor {
          @if $vendor-gradients == false {
            $vendor-gradients: -#{$vendor}-linear-gradient(nth($gradients, $i));
          }
          @else {
            $vendor-gradients: $vendor-gradients, -#{$vendor}-linear-gradient(nth($gradients, $i));
          }
        }
        @else if $vendor == false {
          @if $vendor-gradients {
            $vendor-gradients: "linear-gradient(#{nth($gradients, $i)})";
            $vendor-gradients: unquote($vendor-gradients);
          }
          @else {
            $vendor-gradients: $vendor-gradients, "linear-gradient( #{nth($gradients, $i)} )";
            $vendor-gradients: unquote($vendor-gradients);
          }
        }
      }
      @return $vendor-gradients;
    }
  }


  @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);
    }
  }

}

//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%));