// 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';

}