// Skeleton responsive design mixin. Gives what we need by default but feel free to add to it with other responsive
// design mixins as required.

//how big is a small screen?
$wc-small-screen: 1000px !default;
//and a common/medium screen?
$wc-medium-screen: 1280px !default;
//how about a BIG screen?
$wc-large-screen: 1921px !default;//bigger than 1080p

// guess what this is for!
$wc-bigger-than-small-screen: $wc-small-screen + 1px;

@mixin respond-phonelike {
	@media only screen and (max-width : 773px) {
		@content;
	}
}

@mixin respond-not-phonelike {
	@media only screen and (min-width: 774px) {
		@content;
	}
}

@mixin respond-small-screen {
	@media only screen and (max-width: 1000px) {
		@content;
	}
}

@mixin respond-not-small {
	@media only screen and (min-width: 1001px) {
		@content;
	}
}

@mixin respond-bigger-screen {
	@media only screen and (min-width: 1281px) {
		@content;
	}
}

// TODO Do we want to add some pixel density tests for phones/tablets?
// (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
// (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
// (min-resolution: 2dppx),             /* The standard way */
// (min-resolution: 192dpi)             /* dppx fallback */

@mixin respond-medium-density {
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
		@content;
	}
}

@mixin respond-high-density {
	@media only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-resolution: 2dppx),
	only screen and (min-resolution: 192dpi) {
		@content;
	}
}
