@mixin grid-column-gradient($values...) {
  background-image: deprecated-webkit-gradient(linear, left top, left bottom, $values);
  background-image:  -webkit-linear-gradient(left, $values);
  background-image:     -moz-linear-gradient(left, $values);
  background-image:      -ms-linear-gradient(left, $values);
  background-image:       -o-linear-gradient(left, $values);
  background-image: unquote("linear-gradient(left, #{$values})");
}

@function gradient-stops($grid-columns, $color: $visual-grid-color) {
  $transparent: rgba(0,0,0,0);

  $column-width: flex-grid(1, $grid-columns);
  $gutter-width: flex-gutter($grid-columns);
  $column-offset: $column-width;

  $values: ($transparent 0, $color 0);

  @for $i from 1 to $grid-columns*2 {
    @if is-even($i) {
      $values: append($values, $transparent $column-offset);
      $values: append($values, $color $column-offset);
      $column-offset: $column-offset + $column-width;
    }

    @else {
      $values: append($values, $color $column-offset);
      $values: append($values, $transparent $column-offset);
      $column-offset: $column-offset + $gutter-width;
    }
  }

  @return $values;
}

@if $visual-grid == true {
  body:before {
    content: '';
    display: inline-block;
    @include grid-column-gradient(gradient-stops($grid-columns));
    height: 100%;
    left: 0;
    margin: 0 auto;
    max-width: $max-width;
    opacity: $visual-grid-opacity;
    position: fixed;
    right: 0;
    width: 100%;

    @if $visual-grid-index == back {
      z-index: -1;
    }

    @else if $visual-grid-index == front {
      z-index: 9999;
    }

    @each $breakpoint in $visual-grid-breakpoints {
      @if $breakpoint != nil {
        @include breakpoint($breakpoint) {
          @include grid-column-gradient(gradient-stops($grid-columns));
        }
      }
    }
  }
}