@charset "UTF-8";

@mixin grid-column-gradient($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(to left, #{$values})");
}

@if $visual-grid == true or $visual-grid == yes {
    body:before {
        @include grid-column-gradient(gradient-stops($grid-columns));
        content: "";
        display: inline-block;
        height: 100%;
        left: 0;
        margin: 0 auto;
        max-width: $max-width;
        opacity: $visual-grid-opacity;
        pointer-events: none;
        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 {
                @include media($breakpoint) {
                    @include grid-column-gradient(gradient-stops($grid-columns));
                }
            }
        }
    }
}