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

// Submitted by Nathan Crank // nathancrank.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  {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)

// 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

@else
  background: url("#{$path}") $extras
  background-size: $size