$grid-overlay-color: rgba(255, 0, 255, 0.05) !default;

@function grid-background($grid: default) {
  $gradient: ();
  @for $i from 1 to grid-value($grid, column-count) {
    $gradient: join($gradient,
                    ($grid-overlay-color columns($i, $grid: $grid),
                     transparent columns($i, $grid: $grid),
                     transparent columns-and-gutter($i, $grid: $grid),
                     $grid-overlay-color (columns-and-gutter($i, $grid: $grid))),
                    comma);
  }
  @return linear-gradient(to right, #{$gradient});
}

.grid-overlay {
  position: fixed;
  z-index: 9000;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-image: grid-background(default);
  background-size: px-to-percent(inner-width(default)) 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  pointer-events: none;
  display: none;

  @if variable-exists(limit-width) {
    @include breakpoint($min: rem-calc($limit-width)) {
      background-size: rem-calc(limit-width-scale(inner-width())) 100%;
    }
  }

  @include mobile {
    background-image: grid-background(mobile);
    background-size: px-to-percent(inner-width(mobile), $grid: mobile) 100%;
  }

  &--active {
    display: block;
  }
}