/**
 * Media condition tag for a retina (1.3 or higher) DPI
 */
@mixin retina {
	@media (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
		@content
	}
}

/**
 * Shortcode for including normal and retina image. Requirements:
 * - images are located in /images/ folder
 * - retina image equals to non-retina + "@2x" (e.g. logo.png & logo@2x.png)
 * - retina image width & height are 2 times of normal image (e.g. 100x50px & 200x100px)
 */
@mixin background-image-2x($filename, $width, $height, $extention: 'png') {
	@include retina {
		background-image: url('../images/#{$filename}@2x.#{$extention}');
	}

	background-image: url('../images/#{$filename}.#{$extention}');
	background-repeat: no-repeat;
	background-size: $width $height;
}

/**
 * Responsive breakpoints
 */
@mixin breakpoint-tablet {
	@media (max-width: 991px) {
		@content
	}
}

@mixin breakpoint-phone {
	@media (max-width: 767px) {
		@content
	}
}