/*
 * 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


//Sprite mixin, works perfectly with standard defines
@mixin sprite-retina($sprite) {
  $dir: "icons";
  $icons: sprite-map("#{$dir}/*.png", $layout: horizontal);
  $icons-2x: sprite-map("#{$dir}-2x/*.png", $layout: horizontal);

  background-image: sprite-url($icons);
  background-position: sprite-position($icons, $sprite);
  background-repeat: no-repeat;
  overflow: hidden;
  @include inline-block;
  height: image-height(sprite-file($icons, $sprite));
  width: image-width(sprite-file($icons, $sprite));

  @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) round(nth(sprite-position($icons-2x, $sprite), 2) / 2);
      height: image-height(sprite-file($icons-2x, $sprite)) / 2;
      width: image-width(sprite-file($icons-2x, $sprite)) / 2;
  }
}


/*
 * Retina Backgrounds for Compass
 * by:              Gaya Kessler
 * last update:     01/14/13
 *
 * Usage:
 * 1. create background image for pixel ratio 1 screens and put it somewhere in your images folder.
 * 2. create background image for pixel ratio 2 screens and put it somewhere in your images folder.
 * 3. include the background-image property in your Sass/Scss using: '@include background-retina(<ratio-1-imagefile>, <ratio-2-imagefile>)'
 */

@mixin background-retina($normal, $retina) {
    background-image: image-url($normal);

    @media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 2) {
        background-image: image-url($retina);
        background-size: (image-width($retina) / 2) (image-height($retina) / 2);
    }
}