@use "sass:map";
@use "sass:string";
@use "pkg:iro-sass/bem";
@use "pkg:iro-sass/props";
@use "pkg:include-media/dist/include-media" as media;

@use "core.vars" as vars;
@forward "core.vars";

@mixin styles {
	@include bem.theme("base") {
		background-color: props.get(vars.$theme, --bg-base);

		@include bem.suffix("light") {
			@media (prefers-color-scheme: light) {
				background-color: props.get(vars.$theme, --bg-base);
			}
		}

		@include bem.suffix("dark") {
			@media (prefers-color-scheme: dark) {
				background-color: props.get(vars.$theme, --bg-base);
			}
		}
	}

	@include bem.theme("l1") {
		background-color: props.get(vars.$theme, --bg-l1);

		@include bem.suffix("light") {
			@media (prefers-color-scheme: light) {
				background-color: props.get(vars.$theme, --bg-l1);
			}
		}

		@include bem.suffix("dark") {
			@media (prefers-color-scheme: dark) {
				background-color: props.get(vars.$theme, --bg-l1);
			}
		}
	}

	@include bem.theme("l2") {
		background-color: props.get(vars.$theme, --bg-l2);

		@include bem.suffix("light") {
			@media (prefers-color-scheme: light) {
				background-color: props.get(vars.$theme, --bg-l2);
			}
		}

		@include bem.suffix("dark") {
			@media (prefers-color-scheme: dark) {
				background-color: props.get(vars.$theme, --bg-l2);
			}
		}
	}

	@include bem.theme("50") {
		background-color: props.get(vars.$theme, --base, --50);

		@include bem.suffix("light") {
			@media (prefers-color-scheme: light) {
				background-color: props.get(vars.$theme, --base, --50);
			}
		}

		@include bem.suffix("dark") {
			@media (prefers-color-scheme: dark) {
				background-color: props.get(vars.$theme, --base, --50);
			}
		}
	}
}