//************************************************************************//
// Background-image property for adding multiple background images with
// gradients, or for stringing multiple gradients together.
//************************************************************************//

@mixin background-image($images...) {
    background-image: _add-prefix($images, webkit);
    background-image: _add-prefix($images);
}

@function _add-prefix($images, $vendor: false) {
    $images-prefixed: ();
    $gradient-positions: false;
    @for $i from 1 through length($images) {
        $type: type-of(nth($images, $i)); // Get type of variable - List or String

        // If variable is a list - Gradient
        @if $type == list {
            $gradient-type: nth(nth($images, $i), 1); // linear or radial
            $gradient-pos: null;
            $gradient-args: null;

            @if ($gradient-type == linear) or ($gradient-type == radial) {
                $gradient-pos: nth(nth($images, $i), 2); // Get gradient position
                $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue)
            } @else {
                $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
            }

            $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
            $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
            $images-prefixed: append($images-prefixed, $gradient, comma);
        }
            // If variable is a string - Image
        @else if $type == string {
            $images-prefixed: join($images-prefixed, nth($images, $i), comma);
        }
    }
    @return $images-prefixed;
}

//Examples:
//@include background-image(linear-gradient(top, orange, red));
//@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
//@include background-image(url("/images/a.png"), linear-gradient(orange, red));
//@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
//@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));
