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

// Submitted by Nathan Crank // nathancrank.com

// Updated by Gabriel R. Sezefredo // gabriel.sezefredo.com.br

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

/**

* Allows you to use retina images at various pixel densities.
* Examples:
*
*   @include retina(/images/mypic.jpg, 2);
*   @include 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.
*/

@mixin retina($path, $cap: 2, $size: auto auto, $extras: null) {

/*
 * Set a counter and get the length of the image path.
 */
$position: -1;
$strpath: '#{$path}';
$length: str-length($strpath);

/*
 * Loop ver the image path and figure out the
 * position of the dot where the extension begins.
 */
@for $i from $length through $length - 10{
    @if $position == -1 {
        $char : str-slice($strpath, $i, $i);
        @if str-index($char, ".") == 1 {
            $position: $i;
        }
    }
}

/*
 * If we were able to figure out where the extension is,
 * slice the path into a base and an extension. Use that to
 * calculate urls for different density environments. Set
 * values for different environments.
 */
@if $position != -1 {
  $ext: str-slice($strpath, $position + 1, $length);
  $base: str-slice($strpath, 1, $position - 1);
  $at1x_path: "#{$base}.#{$ext}";
  $at2x_path: "#{$base}@2x.#{$ext}";

  /*
   * Set a base background for 1x environments.
   */
  background: url("#{$at1x_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("#{$at2x_path}") $extras;
           background-size : $size;
  }

  /*
   * Create media queries for all environments that the user has
   * provided images for.
   */
  @if $cap >= 2 {
    @for $env from 2 through $cap {
      $suffix: "@#{$env}x";
      @media (-webkit-min-device-pixel-ratio: $env),
             (min-resolution: $env * 96dpi) {
               background      : url("#{$base}#{$suffix}.#{$ext}") $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;
}

}