// retina.scss
// A helper mixin for applying high-resolution background images (http://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
// http://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;
    }
}