//************************************************************************//
// Background property for adding multiple backgrounds using shorthand
// notation.
//************************************************************************//

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

    $fallback-color: false;
    @if (type-of($fallback) == color) or ($fallback == "transparent") {
        $fallback-color: $fallback;
    } @else {
        $fallback-color: _extract-background-color($backgrounds);
    }

    @if $fallback-color {
        background-color: $fallback-color;
    }
    background: _background-add-prefix($backgrounds, webkit);
    background: _background-add-prefix($backgrounds);
}

@function _extract-background-color($backgrounds) {
    $final-bg-layer: nth($backgrounds, length($backgrounds));
    @if type-of($final-bg-layer) == list {
        @for $i from 1 through length($final-bg-layer) {
            $value: nth($final-bg-layer, $i);
            @if type-of($value) == color {
                @return $value;
            }
        }
    }
    @return false;
}

@function _background-add-prefix($backgrounds, $vendor: false) {
    $backgrounds-prefixed: ();

    @for $i from 1 through length($backgrounds) {
        $shorthand: nth($backgrounds, $i); // Get member for current index
        $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image)

        // If shorthand is a list (gradient)
        @if $type == list {
            $first-member: nth($shorthand, 1); // Get first member of shorthand

            // Linear Gradient
            @if index(linear radial, nth($first-member, 1)) {
                $gradient-type: nth($first-member, 1); // linear || radial
                $gradient-args: false;
                $gradient-positions: false;
                $shorthand-start: false;
                @if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,...
                    $gradient-positions: nth($first-member, 2);
                    $gradient-args: nth($first-member, 3);
                    $shorthand-start: 2;
                } @else { // Linear gradient only - lg(red,orange),...
                    $gradient-positions: nth($shorthand, 2);
                    $gradient-args: nth($shorthand, 3); // Get gradient (red, blue)
                }

                $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions);
                $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);

                // Append any additional shorthand args to gradient
                @if $shorthand-start {
                    @for $j from $shorthand-start through length($shorthand) {
                        $gradient: join($gradient, nth($shorthand, $j), space);
                    }
                }
                $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
            }
                // Image with additional properties
            @else {
                $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
            }
        }
            // If shorthand is a simple string (color or image)
        @else if $type == string {
            $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
        }
    }
    @return $backgrounds-prefixed;
}

//Examples:
//@include background(linear-gradient(top, orange, red));
//@include background(radial-gradient(circle at 40% 40%, orange, red));
//@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
//@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));
