$prefixes: ("-webkit-","-moz-", "-o-", "-ms-", "");

@mixin selection($color, $background, $textshadow: none) {
	@each $prefix in $prefixes {
		::#{$prefix}selection {
			color: $color;
			background: $background;
			text-shadow: none;
		}
	}
}



/*
@include animation(some-name 1s infinite linear);
 */
@mixin animation($animation) {
	@each $prefix in $prefixes {
		#{$prefix}animation: $animation;
	}
}



/*
@include keyframe(background-shift) {
	0% {
		background-position: 0;
	}

	100% {
		background-position: -100%;
	}
}
*/
@mixin keyframe($animation-name) {
	@-webkit-keyframes $animation-name {
		@content;
	}

	@-moz-keyframes $animation-name {
		@content;
	}

	@-o-keyframes $animation-name {
		@content;
	}

	@keyframes $animation-name {
		@content;
	}
}



/*
div.logo {
	background: url("logo.png") no-repeat;
	@include image-2x("logo2x.png", 100px, 25px);
}
 */
@mixin image-2x($image, $width, $height) {
	@media 	(min--moz-device-pixel-ratio: 1.3),
			(-o-min-device-pixel-ratio: 2.6/2),
			(-webkit-min-device-pixel-ratio: 1.3),
			(min-device-pixel-ratio: 1.3),
			(min-resolution: 1.3dppx) {
		/* on retina, use image that's scaled by 2 */
		background-image: url($image);
		background-size: $width $height;
	}
}



/*
@include sprites((".item.calendar",".item.tickets",".item.newsletter"), 64px, 64px, 0, " .icon");

sprites should look like this:

                 _______ _______ _______ _______ 
                |       |       |       |       |
regular state   | icon1 | icon2 | icon3 | icon4 |
                |_______|_______|_______|_______|
                |       |       |       |       |
hover state     | icon1 | icon2 | icon3 | icon4 |
                |_______|_______|_______|_______|
                |       |       |       |       |
active state    | icon1 | icon2 | icon3 | icon4 |
                |_______|_______|_______|_______|
 */
@mixin sprites($selectors, $width, $height, $position: 0, $suffix: "" ) {
	
	$i: $position;
	
	@each $name in $selectors {
		#{$name}#{$suffix} {
			background-position: (-($width * $i)) 0;
		}
		#{$name}:hover#{$suffix} {
			background-position: (-($width * $i)) (-($height));
		}
		#{$name}:active#{$suffix} {
			background-position: (-($width * $i)) (-($height * 2));
		}
		$i: $i + 1;
	}
	
}