// Background Grid Syntax
// ======================

@import "compass/layout/stretching";

// The overlay is painted over your container's ::after pseudo-element,
// so we must give position to the container itself.
// If relative doesn't suit your layout, it can be replaced by absolute/fixed.
$overlay-position       : relative        !default;

// Set the location of the switch.
$grid-toggle-position   : left bottom     !default;

// Set the color of background grids.
$grid-background-color  : rgba(#66f, .25) !default;

// Set the line height for your vertical rhythm.
$base-line-height       : 24px            !default;

// Grid Background
// ---------------
// Show a grid background on any element.
// - [$grid]  : <settings>
@mixin grid-background(
  $grid: get-grid()
) {
  $grid         : get-adjusted-grid($grid);

  $this-flow    : get-setting(flow, $grid);
  $this-show    : get-setting(show-grids, $grid);

  $stops        : get-grid-color-stops($grid);

  @include grid-background-output($stops, $this-show, $this-flow);
}

// Grid Overlay
// ------------
// Generate an icon to trigger grid-overlays on any given elements.
// $grids...  : <selector> [<settings>] [, <selector>]*
@mixin grid-overlay (
  $grids...
) {
  $vert: nth($grid-toggle-position, 1);
  $horz: nth($grid-toggle-position, 2);

  head {
    @include border-radius(.25em);
    display: block;
    position: fixed;
    #{$horz}: 10px;
    #{$vert}: 10px;
    z-index: 999;
    color: #333;
    text-shadow: 0 0 3px #fff;
    &::before {
      content: "|||";
      display: block;
      padding: 10px 14px;
      letter-spacing: -1;
      font: {
        family: sans-serif;
        size: 26px;
        weight: bold;
      }
    }
    &:hover {
      @include box-shadow(0 0 3px rgba(#333,.5));
      background: rgba(white,.5);
      @each $grid in $grids {
        $selector: nth($grid, 1);
        $grid: if(length($grid) > 1, nth($grid, 2), get-grid());

        ~ #{$selector},
        ~ body #{$selector} {
          position: unquote($overlay-position);
          &::before {
            @extend %grid-overlay-base;
            @include grid-background($grid);
          }
        }
      }
    }
  }
}

%grid-overlay-base {
  @include stretch;
  content: " ";
  z-index: 998;
}

// Grid Color-Stops
// ----------------
// Calculate the color-stops needed for a particular grid.
// - $grid  : <settings>
@function get-grid-color-stops(
  $grid: parse-grid()
) {
  $stops  : ();
  $color  : $grid-background-color;
  $trans  : transparent;
  $light  : lighten($color, 15%);

  $this-columns           : get-setting(columns, $grid);
  $this-gutters           : get-setting(gutters, $grid);
  $this-column-width      : get-setting(column-width, $grid);
  $this-layout-math       : get-setting(layout-math, $grid);
  $this-gutter-position   : get-setting(gutter-position, $grid);

  @for $location from 1 through column-count($this-columns) {
    $this-stop: compact();

    @if $location == 1 {
      $this-stop: append($this-stop, $color, comma);
    } @else {
      $start: get-isolation(1, $location, $this-columns, $this-gutters, $this-column-width, $this-layout-math);
      $this-stop: append($this-stop, $color $start, comma);
    }

    @if $location == column-count($this-columns) {
      $this-stop: append($this-stop, $light, comma);
    } @else {
      $end-color: $light;

      @if $this-gutter-position != inside {
        $gutter: get-span-width($location, 1, $this-columns, $this-gutters, $this-column-width, $this-layout-math, $this-gutter-position);
        $this-stop: append($this-stop, $light $gutter, comma);
        $this-stop: append($this-stop, $trans $gutter, comma);
        $end-color: $trans;
      }

      $end: get-isolation(1, $location + 1, $this-columns, $this-gutters, $this-column-width, $this-layout-math);
      $this-stop: append($this-stop, $end-color $end, comma);
    }

    $stops: join($stops, $this-stop, comma);
  }

  @return $stops;
}