// SVG Utilities
// =============



// SVG Validate Units
// ------------------
/// Make sure a length is supported in svg
///
/// @access private
///
/// @param {Length} $length -
///   The length to validate
/// @param {String} $name [null] -
///   Optional name of length origin,
///   for error reporting
///
/// @return {Length} -
///   An svg-validated length, or comparable valid length
@function _susy-svg-validate-units(
  $length,
  $name: null
) {
  $_svg-units: ('em', 'ex', 'px', 'pt', 'pc', 'cm', 'mm', 'in', '%');
  $string: type-of($length) == 'string';

  @if ($length == 0) or ($string) or index($_svg-units, unit($length)) {
    @return $length;
  }

  @return _susy-error(
    '`#{unit($length)}` #{$name} units are not supported in SVG',
    '_susy-svg-validate-units');
}



// SVG Rect
// --------
/// Build a single svg rectangle
///
/// @access private
///
/// @param {Length} $x -
///   Horizontal position for the rectangle
/// @param {Length} $width -
///   Width of the rectangle
/// @param {Length} $offset [null] -
///   Offset the rectangle, to account for edge gutters
///
/// @return {String} -
///   Escaped string representing one svg rectangle
@function _susy-svg-rect(
  $x,
  $width,
  $offset: null
) {
  $x: _susy-svg-validate-units($x);
  $width: _susy-svg-validate-units($width);
  $offset: if($offset == 0, null, $offset);

  @if (type-of($offset) == 'number') and (type-of($x) == 'number') {
    @if comparable($x, $offset) {
      $x: $x + $offset;
    } @else {
      $x: 'calc(#{$x} + #{$offset})';
    }
  } @else if $offset and ($x != 0) {
    $x: 'calc(#{$x} + #{$offset})';
  } @else if $offset {
    $x: $offset;
  }

  @return '%3Crect x="#{$x}" width="#{$width}" height="100%"/%3E';
}



// SVG Color
// ---------
/// Stringify colors, and escape hex symbol
///
/// @access private
///
/// @param {Color} $color -
///   Color to stringify and escape
///
/// @return {String} -
///   Escaped string value of color
@function _susy-svg-color(
  $color
) {
  $color: inspect($color); // convert to string

  @if (str-index($color, '#') == 1) {
    $color: '%23' + str-slice($color, 2);
  }

  @return $color;
}



// SVG Gradient
// ------------
/// Create a multi-color svg gradient
///
/// @access private
///
/// @param {List} $colors -
///   List of colors to be equally spaced from `0%` to `100%`
///   in each column rectangle
///
/// @return {String} -
///   Escaped string representing one svg gradient
///   (`id="susy-svg-gradient"`)
@function _susy-svg-gradient(
  $colors
) {
  $gradient: '%3Cdefs%3E%3ClinearGradient spreadMethod="pad"';
  $gradient: '#{$gradient} id="susy-svg-gradient"';
  $gradient: '#{$gradient} x1="0%" y1="0%" x2="100%" y2="0%"%3E';

  @for $i from 1 through length($colors) {
    $color: _susy-svg-color(nth($colors, $i));
    $offset: percentage(($i - 1) / (length($colors) - 1));
    $stop: '%3Cstop offset="#{$offset}" style="stop-color:#{$color};" /%3E';

    $gradient: $gradient + $stop;
  }

  @return $gradient + '%3C/linearGradient%3E%3C/defs%3E';
}