/**
 * Mixin for clearfix
 * @include clearfix;
*/
@mixin clearfix {
	&:before,
	&:after {
		content: ' ';
		display: table;
	}

	&:after {
		clear: both;
	}
}

/**
 * @font-face mixin
 * Bulletproof font-face via Font Squirrel
 * @include fontface('family', 'assets/fonts/', 'myfontname');
 */
@mixin fontface($font-family, $font-url, $font-name) {
	@font-face {
		font: {
			family: $font-family;
			style: normal;
			weight: normal;
		}

		src: url($font-url + '/' + $font-name + '.eot');
		src: url($font-url + '/' + $font-name + '.eot#iefix')
				format('embedded-opentype'),
			url($font-url + '/' + $font-name + '.woff') format('woff'),
			url($font-url + '/' + $font-name + '.ttf') format('truetype'),
			url($font-url + '/' + $font-name + '.svg#' + $font-name)
				format('svg');
	}
}

/**
 * IMAGE RETINA
 * @include image-2x(/img/image.png, 100%, auto);
 */
@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) {
		background-image: url($image);
		background-size: $width $height;
	}
}

/**
 * MIXIN: Responsive Media Queries
 * USAGE:
	@include r(240)  {}
	@include r(320)  {}
	@include r(480)  {}
	@include r(768)  {}
	@include r(1024) {}
	@include r(1140) {}
	@include r(1280) {}
*/
@mixin rmax($point) {
	@media (max-width: #{$point}px) {
		@content;
	}
}

@mixin rmin($point) {
	@media (min-width: #{$point}px) {
		@content;
	}
}

@mixin rmq($point) {
	@media (max-width: #{$point}px) {
		@content;
	}
}

@mixin r($point) {
	@media (min-width: #{$point}px) {
		@content;
	}
}
