@use "variables";

@mixin respond-to-horizontal-device($device) {
	@if $device == pad {
		@media only screen and (width >= 400px) and (height <= 600px) {
			@content;
		}
	} @else if $device == phone {
		@media only screen and (width >= 400px) and (height <= 300px) {
			@content;
		}
	}
}

@mixin respond-to-height($media) {
	@if $media == pico-down {
		@media only screen and (max-height: variables.$bp-pico) {
			@content;
		}
	} @else if $media == pico-up {
		@media only screen and (min-height: variables.$bp-pico) {
			@content;
		}
	} @else if $media == tiny-down {
		@media only screen and (max-height: variables.$bp-tiny) {
			@content;
		}
	} @else if $media == tiny-up {
		@media only screen and (min-height: variables.$bp-tiny) {
			@content;
		}
	} @else if $media == small-up {
		@media only screen and (min-height: variables.$bp-small) {
			@content;
		}
	} @else if $media == small-down {
		@media only screen and (max-height: variables.$bp-small) {
			@content;
		}
	} @else if $media == medium-up {
		@media only screen and (min-height: variables.$bp-medium) {
			@content;
		}
	} @else if $media == medium-down {
		@media only screen and (max-height: variables.$bp-medium) {
			@content;
		}
	} @else if $media == large-up {
		@media only screen and (min-height: variables.$bp-large) {
			@content;
		}
	} @else if $media == large-down {
		@media only screen and (max-height: variables.$bp-large) {
			@content;
		}
	} @else if $media == huge-down {
		@media only screen and (max-height: variables.$bp-huge) {
			@content;
		}
	} @else if $media == huge-up {
		@media only screen and (min-height: variables.$bp-huge) {
			@content;
		}
	} @else if $media == huge-down {
		@media only screen and (max-height: variables.$bp-huge) {
			@content;
		}
	} @else if $media == jumbo-up {
		@media only screen and (min-height: variables.$bp-jumbo) {
			@content;
		}
	} @else if $media == jumbo-down {
		@media only screen and (max-height: variables.$bp-jumbo) {
			@content;
		}
	} @else if $media == ludicrous-up {
		@media only screen and (min-height: variables.$bp-ludicrous) {
			@content;
		}
	} @else if $media == jumbo-up {
		@media only screen and (max-height: variables.$bp-ludicrous) {
			@content;
		}
	}
}

@mixin respond-to($media) {
	@if $media == pico-down {
		@media only screen and (max-width: variables.$bp-pico) {
			@content;
		}
	} @else if $media == pico-up {
		@media only screen and (min-width: variables.$bp-pico) {
			@content;
		}
	} @else if $media == tiny-down {
		@media only screen and (max-width: variables.$bp-tiny) {
			@content;
		}
	} @else if $media == tiny-up {
		@media only screen and (min-width: variables.$bp-tiny) {
			@content;
		}
	} @else if $media == small-up {
		@media only screen and (min-width: variables.$bp-small) {
			@content;
		}
	} @else if $media == small-down {
		@media only screen and (max-width: variables.$bp-small) {
			@content;
		}
	} @else if $media == medium-up {
		@media only screen and (min-width: variables.$bp-medium) {
			@content;
		}
	} @else if $media == medium-down {
		@media only screen and (max-width: variables.$bp-medium) {
			@content;
		}
	} @else if $media == large-up {
		@media only screen and (min-width: variables.$bp-large) {
			@content;
		}
	} @else if $media == large-down {
		@media only screen and (max-width: variables.$bp-large) {
			@content;
		}
	} @else if $media == huge-down {
		@media only screen and (max-width: variables.$bp-huge) {
			@content;
		}
	} @else if $media == huge-up {
		@media only screen and (min-width: variables.$bp-huge) {
			@content;
		}
	} @else if $media == huge-down {
		@media only screen and (max-width: variables.$bp-huge) {
			@content;
		}
	} @else if $media == jumbo-up {
		@media only screen and (min-width: variables.$bp-jumbo) {
			@content;
		}
	} @else if $media == jumbo-down {
		@media only screen and (max-width: variables.$bp-jumbo) {
			@content;
		}
	} @else if $media == ludicrous-up {
		@media only screen and (min-width: variables.$bp-ludicrous) {
			@content;
		}
	} @else if $media == jumbo-up {
		@media only screen and (max-width: variables.$bp-ludicrous) {
			@content;
		}
	}
}

@mixin full-height() {
	height: 100vh; /* fallback for Opera, IE and etc. */
	height: 100svh;
}
