@use 'sass:map';
@use '../context' as *;

@include layer(props, $use-css-layers, $layer-prefix) {
	:where(:host, :root, .theme) {
		// static
		@each $size, $value in $spacing {
			--spacing-#{$size}: #{$value};
		}

		// dynamic
		@each $name, $sizes in $spacing-dynamic {
			@each $breakpoint, $size in $sizes {
				@if map.has-key($breakpoints, $breakpoint) {
					@include media-breakpoint-up($breakpoint, $breakpoints) {
						$var: $size;

						// if is a static spacing
						@if map.has-key($spacing, $size) {
							$var: var(--spacing-#{$size});
						}

						--spacing-#{$name}: #{$var};
					}
				}
			}
		}
	}
}