@use './variables' as *;

@function -flatten($map, $prefix: '') {
	$output: ();
	@each $x, $y in $map {
		@if type-of($y) == 'map' {
			$output: map-merge($output, -flatten($y, $prefix + '-' + $x));
		} @else {
			$output: map-merge(
				$output,
				(
					'--theme#{$prefix}-#{$x}': $y
				)
			);
		}
	}
	@return $output;
}

@each $name, $material in ('light': $material-light-theme, 'dark': $material-dark-theme) {
	.theme--#{$name} {
		@each $x, $y in -flatten($material) {
			#{$x}: #{$y};
		}

		background-color: var(--theme-surface);
		color: var(--theme-text-primary);

		a {
			color: map-deep-get($material, 'text', 'link');
		}

		.text--primary {
			color: var(--theme-text-primary);
		}

		.text--secondary {
			color: var(--theme-text-secondary);
		}

		.text--disabled {
			color: var(--theme-text-disabled);
		}
	}
}

:root {
	--theme-bp-xs: #{map-get($grid-breakpoints, 'xs')};
	--theme-bp-sm: #{map-get($grid-breakpoints, 'sm')};
	--theme-bp-md: #{map-get($grid-breakpoints, 'md')};
	--theme-bp-lg: #{map-get($grid-breakpoints, 'lg')};
	--theme-bp-xl: #{map-get($grid-breakpoints, 'xl')};
}