/*
 * Retina Sprites for Compass
 * by:              Gaya Kessler
 * last update:     01/14/13
 *
 * Usage:
 * 1. create two folders in your image directory (in this case 'icons' and 'icons-2x').
 * 2. adjust the foldernames defined below if you use different names.
 * 3. create sprite images for pixel ratio 1 screens and put them in the first folder.
 * 4. create sprite images for pixel ratio 2 screens and put them in the second folder, use the same filenames.
 * 5. use the sprite-image in your Sass/Scss using: '@include use-sprite(<sprite-name>)'
 */

//first we'll define the folders where the sprites are and their layouts
//$icons: sprite-map("1x/*.png", $layout: smart);
$icons-1point5: sprite-map("sprites/*.png", $layout: smart);
//$icons-2x: sprite-map("2x/*.png", $layout: smart);

//Sprite mixin, works perfectly with standard defines
@mixin use-sprite($sprite, $x: 0, $y: 0) {
  overflow: hidden;
  display: block;
  background-repeat: no-repeat;

// 1X
//background-image: sprite-url($icons);
//background-position: sprite-position($icons, $sprite, $x, $y);
//height: image-height(sprite-file($icons, $sprite));
//width: image-width(sprite-file($icons, $sprite));

//1.5X
  background-image: sprite-url($icons-1point5);
  background-size: (image-width(sprite-path($icons-1point5)) / 1.5) (image-height(sprite-path($icons-1point5)) / 1.5);
  background-position: round(nth(sprite-position($icons-1point5, $sprite), 1) / 1.5 + $x) round(nth(sprite-position($icons-1point5, $sprite), 2) / 1.5 + $y);
  height: image-height(sprite-file($icons-1point5, $sprite)) / 1.5;
  width: image-width(sprite-file($icons-1point5, $sprite)) / 1.5;

//2X
//@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 2) {
//  background-image: sprite-url($icons-2x);
//  background-size: (image-width(sprite-path($icons-2x)) / 2) (image-height(sprite-path($icons-2x)) / 2);
//  background-position: round(nth(sprite-position($icons-2x, $sprite), 1) / 2 + $x) round(nth(sprite-position($icons-2x, $sprite), 2) / 2 + $y);
//  height: image-height(sprite-file($icons-2x, $sprite)) / 2;
//  width: image-width(sprite-file($icons-2x, $sprite)) / 2;
//}
}