@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 sm-and-up {
	@media (min-width: 48em) {
		@content;
	}
}

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

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

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