/******************************************************************
Site Name:
Author:

Stylesheet: Retinajs - v2.1.2

******************************************************************/

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

}
