{
	// Default options
	'functions': true,
	'variableNameTransforms': ['underscored']
}

{{#extend "stylus"}}
{{#content "sprites" mode="append"}}
{{#each retina_sprites}}
${{strings.name_name}} = '{{name}}'
${{strings.name_x}} = {{px.x}}
${{strings.name_y}} = {{px.y}}
${{strings.name_offset_x}} = {{px.offset_x}}
${{strings.name_offset_y}} = {{px.offset_y}}
${{strings.name_width}} = {{px.width}}
${{strings.name_height}} = {{px.height}}
${{strings.name_total_width}} = {{px.total_width}}
${{strings.name_total_height}} = {{px.total_height}}
${{strings.name_image}} = '{{{escaped_image}}}'
${{strings.name}} = {{px.x}} {{px.y}} {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}} {{px.total_width}} {{px.total_height}} '{{{escaped_image}}}' '{{name}}'
{{/each}}
{{/content}}

{{#content "spritesheet" mode="append"}}
{{#if retina_spritesheet}}
${{retina_spritesheet_info.strings.name_width}} = {{retina_spritesheet.px.width}}
${{retina_spritesheet_info.strings.name_height}} = {{retina_spritesheet.px.height}}
${{retina_spritesheet_info.strings.name_image}} = '{{{retina_spritesheet.escaped_image}}}'
${{retina_spritesheet_info.strings.name_sprites}} ={{#each retina_sprites}} ${{strings.name}}{{/each}}
${{retina_spritesheet_info.strings.name}} = {{retina_spritesheet.px.width}} {{retina_spritesheet.px.height}} '{{{retina_spritesheet.escaped_image}}}' ${{retina_spritesheet_info.strings.name_sprites}}
{{/if}}

// These "retina group" variables are mappings for the naming and pairing of normal and retina sprites.

// The list formatted variables are intended for mixins like `retinaSprite` and `retinaSprites`.

{{#each retina_groups}}
${{strings.name_group_name}} = '{{name}}'
${{strings.name_group}} = '{{name}}' ${{normal.strings.name}} ${{retina.strings.name}}
{{/each}}
{{#if retina_groups}}
${{retina_groups_info.strings.name}} ={{#each retina_groups}} ${{strings.name_group}}{{/each}}
{{/if}}
{{/content}}

{{#content "sprite-functions" mode="append"}}

{{#if options.functions}}

// The `retinaSprite` mixin sets up rules and a media query for a sprite/retina sprite.
// It should be used with a "retina group" variable.
//
// The media query is from CSS Tricks: https://css-tricks.com/snippets/css/retina-display-media-query/
//
// $icon_home_group = 'icon-home' $icon_home $icon_home_2x;
//
// .icon-home {
//     retinaSprite($icon_home_group)
// }


spriteBackgroundSize($sprite) {
	background-size $sprite[6] $sprite[7]
}

retinaSprite($retina_group) {
	$normal_sprite = $retina_group[1]
	$retina_sprite = $retina_group[2]
	sprite($normal_sprite)

	@media (-webkit-min-device-pixel-ratio: 2),
				 (min-resolution: 192dpi) {
		spriteImage($retina_sprite)
		spriteBackgroundSize($normal_sprite)
	}
}
{{/if}}
{{/content}}

{{#content "spritesheet-functions" mode="append"}}
{{#if options.functions}}

// The `retinaSprites` mixin generates a CSS rule and media query for retina groups
// This yields the same output as CSS retina template but can be overridden in Stylus
//
// retinaSprites($retina_groups)

retinaSprites($retina_groups) {
	for $retina_group in $retina_groups {
		$sprite_name = $retina_group[0];
		.{$sprite_name} {
			retinaSprite $retina_group
		}
	}
}
{{/if}}
{{/content}}
{{/extend}}