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

// NOTE: If you change any of these take a look at the configuration of wc/ui/viewportUtils.

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

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