@use "variables";
@use "../screen-sizes";

@function get-variable($key, $density, $size, $device: "") {
	@return var(--db-#{$key}-#{$density}-#{$device}#{$size});
}

@each $density in variables.$densities {
	%db-scaling-#{$density} {
		@each $sizing in variables.$sizings {
			--db-sizing-#{$sizing}: #{get-variable(
					"sizing",
					$density,
					$sizing
				)};
		}

		@each $fix in variables.$sizings {
			--db-spacing-fixed-#{$fix}: #{get-variable(
					"spacing-fixed",
					$density,
					$fix
				)};
		}

		@each $res in variables.$sizings {
			--db-spacing-responsive-#{$res}: #{get-variable(
					"spacing-responsive",
					$density,
					$res,
					"mobile-"
				)};
		}

		@include screen-sizes.screen() {
			@each $res in variables.$sizings {
				--db-spacing-responsive-#{$res}: #{get-variable(
						"spacing-responsive",
						$density,
						$res,
						"tablet-"
					)};
			}
		}

		@include screen-sizes.screen("md") {
			@each $res in variables.$sizings {
				--db-spacing-responsive-#{$res}: #{get-variable(
						"spacing-responsive",
						$density,
						$res,
						"desktop-"
					)};
			}
		}
	}
}