@use '../tokens/index.scss' as tokens;

// Orientation

@mixin orientation-portrait {
	@media screen and (aspect-ratio <= 1/1),
		screen and (resolution >= 120dpi) and (aspect-ratio <= 1/1) {
		@content;
	}
}

@mixin orientation-landscape {
	@media screen and (aspect-ratio >= 1/1),
		screen and (resolution >= 120dpi) and (aspect-ratio >= 1/1) {
		@content;
	}
}

@mixin orientation-square {
	@media screen and (aspect-ratio <= 1/1),
		screen and (resolution >= 120dpi) and (aspect-ratio <= 1/1) {
		@content;
	}
}

// Mobile-first screen size media queries

@mixin tablet {
	@media screen and (min-width: tokens.$breakpoint-tablet), print {
		@content;
	}
}

@mixin desktop {
	@media screen and (min-width: tokens.$breakpoint-desktop) {
		@content;
	}
}

@mixin widescreen {
	@media screen and (min-width: tokens.$breakpoint-widescreen) {
		@content;
	}
}

// Please avoid using this mixin if possible. It doesn't follow the mobile-first approach to writing CSS.
@mixin discouraged-mobile {
	@media screen and (max-width: (tokens.$breakpoint-tablet - 1px)) {
		@content;
	}
}

@mixin print {
	@media print {
		@content;
	}
}

@mixin prefers-reduced-motion {
	@media (prefers-reduced-motion: reduce) {
		@content;
	}
}