// retina.styl // A helper mixin for applying high-resolution background images (www.retinajs.com)

// Created by John Newman // github.com/jgnewman // axial.agency

/**

* Allows you to use retina images at various pixel densities.
* Examples:
*
*   retina(/images/mypic.jpg, 2)
*   retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent)
*
* @param  {Value}  $path               The path to the file name minus extension.
* @param  {Number} $cap:    2          The highest pixel density level images exist for.
* @param  {Value}  $size:   auto auto  The intended width of the rendered image.
* @param  {Value}  $extras: null       Any other `background` values to be added.
*/

retina($path, $cap = 2, $size = auto auto, $extras = null)

$dirname = dirname($path)
$filename = basename($path)
$at2xpath = pathjoin($dirname, replace('\.', '@2x.', $filename))

/*
 * Set a base background for 1x environments.
 */
background: url($path) $extras
background-size: $size

/*
 * Create an @2x-ish media query.
 */
@media all and (-webkit-min-device-pixel-ratio : 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5)
  background: url($at2xpath) $extras
  background-size: $size

/*
 * Create media queries for all environments that the user has
 * provided images for.
 */
if $cap >= 2
  for $env in (2..$cap)
    $newpath = pathjoin($dirname, replace('\.', '@' + $env + 'x.', $filename))
    @media (-webkit-min-device-pixel-ratio: $env), (min-resolution: $env * 96dpi)
      background: url($newpath) $extras
      background-size: $size

/*
 * If anything went wrong trying to separate the file from its
 * extension, set a background value without doing anything to it.
 */
else
  background: url($path) $extras
  background-size: $size