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

// Updated 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  {String} $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: ~'') {

@lowretina: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
@2xpath: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`;

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

/*
 * Create an @2x-ish media query.
 */
@media @lowretina {
  background      : url(@2xpath) @extras;
  background-size : @size;
}

/*
 * Create media queries for all environments that the user has
 * provided images for.
 */
.create-queries() when (@cap >= 2) {
  .loop(@env) when (@env <= @cap) {
    @retinapath: ~`@{path}.replace(/\.\w+$/, function(match) { return "@@{env}x" + match; })`;
    @media (-webkit-min-device-pixel-ratio: @env),
           (min-resolution: @env * 96dpi) {
             background      : url(@retinapath) @extras;
             background-size : @size;
    }
    .loop((@env + 1));    // next iteration
  }
  .loop(2);
}
.create-queries();

}