// generated from template svg-_sprites-template.scss on {{date}}

$spriteSvgPath: '../svg-spritesheets/{{{sprite}}}' '../svg-spritesheets/{{{sprite}}}.png';
$spriteSvgWidth: {{{spriteWidth}}};
$spriteSvgHeight: {{{spriteHeight}}};

// svgSprite placeholder is shared to avoid duplication of spritesheet file name
%svgSprite {
	$svgPath: nth($spriteSvgPath, 1);
	$pngPath: nth($spriteSvgPath, 2);

	background-image: url(#{$svgPath});

	.no-svg & {
		background-image: url(#{$pngPath});
	}
}

/**
 * Get sprite width
 */
@function svg-sprite-width($sprite, $scale: 1) {
	$w: ceil(nth($sprite, 3) * $scale);
	@return $w * 1px;
}

/**
 * Get sprite height
 */
@function svg-sprite-height($sprite, $scale: 1) {
	$h: ceil(nth($sprite, 4) * $scale);
	@return $h * 1px;
}

/**
 * Compute the scale of a sprite from a given width
 */
@function svg-sprite-get-scale($sprite, $desiredWidth: null) {
	@if ($desiredWidth == null)
	{
		@return 1;
	}

	@return ($desiredWidth / svg-sprite-width($sprite));
}

/**
 * Raw SVG sprite mixin. Turns an element into an SVG sprite.
 */
@mixin svg-sprite($sprite, $centerX: false, $centerY: false, $scale: 1) {
	@extend %svgSprite;

	// pixel-based positioning
	//$x: round(nth($sprite, 1) * $scale);
	//$y: round(nth($sprite, 2) * $scale);
	//background-position: ($x * 1px) ($y * 1px);

	// percentage-based positioning
	$px: nth($sprite, 5);
	$py: nth($sprite, 6);
	background-position: ($px * 1%) ($py * 1%);

	// this will set the width, height, and background size
	@include svg-sprite-scale($sprite, $scale);

	@if ($centerX or $centerY) {
		@include svg-sprite-center($sprite, $centerX, $centerY, $scale);
	}
}


/**
 * Renders SVG sprite scaled by width.
 */
@mixin svg-sprite-scale-width($sprite, $centerX: false, $centerY: false, $width) {
	$scale: 1;
	
	@if $width {
		$scale: svg-sprite-get-scale($sprite, $width);
	}
	
	@include svg-sprite($sprite, $centerX, $centerY, $scale);
}

/**
 * Renders SVG sprite
 */
@mixin svg-sprite-scale($sprite, $scale: 1) {
	$w: ceil(nth($sprite, 3) * $scale);
	$h: ceil(nth($sprite, 4) * $scale);

	width: $w * 1px;
	height: $h * 1px;

	background-size: (ceil($spriteSvgWidth * $scale) * 1px) (ceil($spriteSvgHeight * $scale) * 1px);
}

/**
 * Renders centered SVG sprite
 */
@mixin svg-sprite-center($sprite, $centerX: false, $centerY: false, $scale: 1) {
	$w: nth($sprite, 3) * $scale;
	$h: nth($sprite, 4) * $scale;

	@if $centerX {
		position: absolute;
		left: 50%;
		margin-left: $w * -0.5px;
	}

	@if $centerY {
		position: absolute;
		top: 50%;
		margin-top: $h * -0.5px;
	}
}

{{#shapes}}
$sprite_{{{name}}}: {{{position.absolute.x}}} {{{position.absolute.y}}} {{{width.outer}}} {{{height.outer}}};

.sprite_{{{name}}} {
	@include sprite-svg($sprite_{{{name}}});
}
{{/shapes}}