// Displays the grid columns in an overlay
// scss-lint:disable SpaceAfterPropertyColon

body::after {
  @function build-grid-background($width) {
    $col-color: rgba(0,0,0,.02);
    $col-width: percentage((($width / $grid-columns) - px($grid-gutter-width)) / $width);
    $offset:    percentage(px($grid-gutter-width / 2) / $width);
    $gutter:    percentage(px($grid-gutter-width) / $width);

    $x: $offset;
    $grid: ();

    @for $i from 0 to $grid-columns {
      $grid: append($grid, transparent $x, comma);
      $grid: append($grid, $col-color  $x, comma);

      $x: $x + $col-width;

      $grid: append($grid, $col-color  $x, comma);
      $grid: append($grid, transparent $x, comma);

      $x: $x + $gutter;
    }

    @return $grid;
  }

  content: 'debug/_grid.css.scss enabled';

  display: block;
  position: fixed;
  top:  0;
  left: 0;
  pointer-events: none;
  z-index: 100000000000;

  padding-top: 1em;
  width:  100%;
  height: 100%;
  background-repeat: repeat-y;
  background-position: center;

  color: red;
  font-size: .8em;
  font-weight: bold;
  text-align: center;
  white-space: pre;


  @media (min-width: $screen-sm-min) {
    background-image: linear-gradient(to right, build-grid-background($container-sm));
    background-size: $container-sm;
  }

  @media (min-width: $screen-md-min) {
    background-image: linear-gradient(to right, build-grid-background($container-md));
    background-size: $container-md;
  }

  @media (min-width: $screen-lg-min) {
    background-image: linear-gradient(to right, build-grid-background($container-lg));
    background-size: $container-lg;
  }
}