@use "helpers";

$db-screen-size-xs: 360;
$db-screen-size-sm: 720;
$db-screen-size-md: 1024;
$db-screen-size-lg: 1440;
$db-screen-size-xl: 1920;

$db-breakpoint-xs: helpers.px-to-em($db-screen-size-xs);
$db-breakpoint-sm: helpers.px-to-em($db-screen-size-sm);
$db-breakpoint-md: helpers.px-to-em($db-screen-size-md);
$db-breakpoint-lg: helpers.px-to-em($db-screen-size-lg);
$db-breakpoint-xl: helpers.px-to-em($db-screen-size-xl);

@mixin screen($size: "sm", $width: "min") {
	$screen: $db-screen-size-sm;

	/* stylelint-disable at-rule-empty-line-before */
	@if ($size == "xs") {
		$screen: $db-screen-size-xs;
	} @else if ($size == "md") {
		$screen: $db-screen-size-md;
	} @else if ($size == "lg") {
		$screen: $db-screen-size-lg;
	} @else if ($size == "xl") {
		$screen: $db-screen-size-xl;
	}
	/* stylelint-enable at-rule-empty-line-before */

	@if ($width == "min") {
		/* stylelint-disable-next-line media-query-no-invalid */
		@media screen and (min-width: #{helpers.px-to-em($screen)}) {
			&:not([data-force-mobile]),
			&[data-force-mobile="false"] {
				@content;
			}
		}
		/* stylelint-disable-next-line at-rule-empty-line-before */
	} @else {
		&[data-force-mobile="true"] {
			@content;
		}

		/* stylelint-disable-next-line media-query-no-invalid */
		@media screen and (max-width: #{helpers.px-to-em($screen - 1)}) {
			@content;
		}
	}
}