/// Plugin: SVG Grid Image
/// ======================
/// @group plugin_svg-grid
/// @see susy-svg-grid



/// ## Overview
/// If you want to generate svg-backgrounds
/// for help visualizing and debugging your grids,
/// import the SVG Grid Plugin.
///
/// The plugin adds `svg-grid-colors` setting
/// to your global defaults,
/// which you can override in `$susy`.
/// It also provides you with a new function,
/// `susy-svg-grid()`,
/// which will return inline svg for use in
/// backgrounds or generated content.
///
/// This function come with an unprefixed alias by default,
/// using the `svg-grid` import.
/// If you only only want prefixed versions of the API,
/// import the `svg-grid/prefix` partial instead.
///
/// @group plugin_svg-grid
///
/// @example scss - importing the plugin
///   // The full path to import Susy will depend on your setup…
///
///   // unprefixed
///   @import 'plugins/svg-grid';
///
///   // prefixed
///   @import 'plugins/svg-grid/prefix';
///
/// @example scss - generating background grids
///   .grid {
///     background: susy-svg-grid() no-repeat scroll;
///   }



// SVG Grid
// --------
/// Return inline svg-data in  to display the grid.
///
/// @group plugin_svg-grid
///
/// @param {Map | List} $grid [$susy] -
///   Map or shorthand defining the current grid
/// @param {Color | List | null} $colors [null] -
///   Column color, or list of colors for column-gradient,
///   used to override the global `svg-grid-colors` setting
/// @param {Length | null} $offset [null] -
///   Manually override the default grid-image offset,
///   to account for grid edges
///
/// @return {String} -
///   CSS inline-data SVG string, in `url(<svg>)` format,
///   for use in image or content properties
/// @example scss
///   .grid {
///     background: susy-svg-grid() no-repeat scroll;
///   }
@function susy-svg-grid(
  $grid: $susy,
  $colors: null,
  $offset: null
) {
  // Grid parsing & normalizing
  $grid: susy-compile($grid, $context-only: true);

  // Color and gradient handling
  $gradient: '';

  @if (not $colors) {
    $colors: susy-get('svg-grid-colors');
  }

  @if length($colors) > 1 {
    $gradient: _susy-svg-gradient($colors);
    $colors: 'url(%23susy-svg-gradient)';
  } @else {
    $colors: _susy-svg-color($colors);
  }

  // Get a default image-width
  $span: (
    'span': map-get($grid, 'columns'),
    'spread': map-get($grid, 'container-spread'),
  );
  $span: map-merge($grid, $span);
  $image-width: su-call('su-span', $span);
  $image-width: if((type-of($image-width) == 'number'), $image-width, 100%);

  // SVG construction
  $columns: map-get($grid, 'columns');
  $offset: $offset or _susy-svg-offset($grid);

  $attrs: 'fill="#{$colors}" width="#{$image-width}"';
  $svg: 'data:image/svg+xml,';
  $svg: $svg + '%3Csvg xmlns="http://www.w3.org/2000/svg" #{$attrs} %3E';
  $svg: $svg + $gradient;

  @for $column from 1 through length($columns) {
    $width: susy-span(1 narrow at $column, $grid);
    $x: _susy-svg-column-position($column, $grid);

    $svg: $svg + _susy-svg-rect($x, $width, $offset);
  }

  @return url('#{$svg}%3C/svg%3E');
}