@mixin light {
	:root[data-mantine-color-scheme="light"] & {
		@content;
	}
}

@mixin dark {
	:root[data-mantine-color-scheme="dark"] & {
		@content;
	}
}

@mixin xs-and-up {
	@media (min-width: 36em) {
		@content;
	}
}

@mixin xs-and-down {
	@media (max-width: 36em) {
		@content;
	}
}

@mixin sm-and-up {
	@media (min-width: 48em) {
		@content;
	}
}

@mixin sm-and-down {
	@media (max-width: 48em) {
		@content;
	}
}

@mixin md-and-up {
	@media (min-width: 62em) {
		@content;
	}
}

@mixin md-and-down {
	@media (max-width: 62em) {
		@content;
	}
}

@mixin lg-and-up {
	@media (min-width: 75em) {
		@content;
	}
}

@mixin lg-and-down {
	@media (max-width: 75em) {
		@content;
	}
}

@mixin xl-and-up {
	@media (min-width: 88em) {
		@content;
	}
}

@mixin xl-and-down {
	@media (max-width: 88em) {
		@content;
	}
}

@mixin background-blur {
	backdrop-filter: var(--surreal-blur);
	-webkit-backdrop-filter: var(--surreal-blur);

	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		background: var(--surreal-menu-background-color);
	}
}