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

@mixin background($backgrounds...) {
  $webkit-backgrounds: ();
  $spec-backgrounds: ();

  @each $background in $backgrounds {
    $webkit-background: ();
    $spec-background: ();
    $background-type: type-of($background);

    @if $background-type == string or $background-type == list {
      $background-str: if($background-type == list, nth($background, 1), $background);

      $url-str:       str-slice($background-str, 1, 3);
      $gradient-type: str-slice($background-str, 1, 6);

      @if $url-str == "url" {
        $webkit-background: $background;
        $spec-background:   $background;
      }

      @else if $gradient-type == "linear" {
        $gradients: _linear-gradient-parser("#{$background}");
        $webkit-background: map-get($gradients, webkit-image);
        $spec-background:   map-get($gradients, spec-image);
      }

      @else if $gradient-type == "radial" {
        $gradients: _radial-gradient-parser("#{$background}");
        $webkit-background: map-get($gradients, webkit-image);
        $spec-background:   map-get($gradients, spec-image);
      }

      @else {
        $webkit-background: $background;
        $spec-background:   $background;
      }
    }

    @else {
      $webkit-background: $background;
      $spec-background:   $background;
    }

    $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
    $spec-backgrounds:   append($spec-backgrounds,   $spec-background,   comma);
  }

  background: $webkit-backgrounds;
  background: $spec-backgrounds;
}