@import (reference) "./index.less";
@import (reference) "./themes/dark.less";
@import (reference) "./themes/light.less";

:root {
	.common();
}

.@{dark-mode-cls} {
	.dark-mode();
	color-scheme: dark;
}

.@{light-mode-cls} {
	.light-mode();
	color-scheme: light;
}

@selector: ~".@{dark-mode-cls}, .@{light-mode-cls}";

:root:not(@{selector}) {
	@media (prefers-color-scheme: dark) {
		.dark-mode();
		color-scheme: dark;
	}

	@media (prefers-color-scheme: light) {
		.light-mode();
		color-scheme: light;
	}
}