/**
 * This is a sprite generator for normal and retina displays
 * @author Bernhard Behrendt
 *
 * HOWTO USE
 *
 * import "compass";
 *
 *  .sprite-button {
 *  @include sprite-bg('myoriginfile', sprite-map("buttons/normal/*.png"), sprite-map("buttons/retina/*.png"), 10px, true);
 *  border:solid 3px #000
 * }
 *
 * @param string  $name   The filename respective the area to use in current context
 * @param string  $norma  The relative path (from config.rb) where the regular spriteimages are stored
 * @param string  $retine The relative path (from config.rb) where the retina spriteimages are stored
 * @param pxls    $padtop The padding top for Text for vertical text center (default 0px)
 * @param boolean $center Define if textalign is center (default false)
 *
 */
@import "compass/css3/background-size";
@import "compass/utilities/sprites/";

@mixin sprite-bg($name, $normal, $retina, $padtop: 0px, $center: null, $padleft: 0px) {
  background-image: sprite-url($normal);
  background-position: sprite-position($normal, $name);
  background-repeat: no-repeat;
  display: block;
  padding-top: $padtop;
  padding-left: $padleft;
  height: image-height(sprite-file($normal, $name))-$padtop;
  width: image-width(sprite-file($normal, $name))-$padleft;

  $width: image-width(sprite-file($normal, $name));

  @media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 2dppx), (min-device-pixel-ratio: 2) {
    @if (sprite-position($normal, $name) != sprite-position($retina, $name)) {
      $ypos: round(nth(sprite-position($retina, $name), 2) / 2);
      background-position: 0 $ypos;
    }

    @include background-size($width auto);
    background-image: sprite-url($retina);
  }

  @if $center==true{
    text-align: center;
  }
}