///
/// Create encoded SVG grid overlay
///
/// @access private
///
/// @param {String} $key        - breakpoint alias
/// @param {Number} $breakpoint - breakpoint value
/// @param {Number} $columns    - breakpoint column count
/// @param {Number} $gutter     - gutter value
///
/// @group Internal Mixins
///
@mixin flint-svg-grid($key, $breakpoint, $columns, $gutter) {
  $svg: "<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
    <defs>
      <linearGradient id='gr' x1='0%' y1='0%' x2='100%' y2='0%'>
        <stop offset='0%' style='stop-color: #{$flint-overlay-color};' />
        <stop offset='100%' style='stop-color: #{lighten($flint-overlay-color, 10%)};' />
      </linearGradient>
    </defs>";

  @for $i from 1 through $columns {
    $x: flint-fluid-width(((($breakpoint / $columns) * ($i - 1)) + $gutter), $breakpoint);
    $span: flint-fluid-width(((($breakpoint) / $columns)) - ($gutter * 2), $breakpoint);
    $svg: $svg + "<rect x='#{$x}' fill='url(#gr)' width='#{$span}' height='100%'/>";
  }

  $svg: $svg + "</svg>";

  @include _($key) {
    max-width: $breakpoint;
    background: {
      image: url("data:image/svg+xml," + flint-html-encode($svg));
      size: 100% 100%;
      position: 0 0;
    }
  }
}

///
/// Apply SVG grid overlay
///
/// @access private
///
/// @requires {Mixin} background-grid
///
/// @group Internal Mixins
///
@mixin flint-overlay-grid {
  @at-root html {
    position: relative;

    &:after {
      transform: translateX(-50%);
      content: " ";
      position: absolute;
      display: block;
      top: 0;
      left: 50%;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      opacity: 0.25;
      z-index: 9999;
      pointer: {
        events: none;
      }

      @each $key, $settings in flint-get-value("breakpoints") {
        @include flint-svg-grid($key, map-get($settings, "breakpoint"), map-get($settings, "columns"), flint-get-gutter());
      }
    }
  }
}