@use 'sass:map';
@use 'sass:string';
@use '../base/maps/tokens' as *;
@use '../base/layout' as *;

$brandui-spacing-positions: (
	'full': '-',
	'top': '-t-',
	'right': '-r-',
	'bottom': '-b-',
	'left': '-l-',
	'horizontal': '-h-',
	'vertical': '-v-'
);
$brandui-spacing-types: (
	'padding': 'pad',
	'margin': 'marg'
);

// Spacing
// Eventually need to convert these to the new system.
@each $device-key, $device-map in $brandui-device-breakpoints-new {
	$device-value: map.get($device-map, 'value');
	$device-prefix: map.get($device-map, 'prefix');

	@media (max-width: string.unquote('#{$device-value}px')) {
		// Device Breakpoints Start

		@each $type-key, $type-val in $brandui-spacing-types {
			@each $position-key, $position-val in $brandui-spacing-positions {
				@each $value-key in $padding-names {
					// Positive Padding & Margin
					.#{$device-prefix}#{$type-val}#{$position-val}#{$value-key} {
						@if $position-key == horizontal {
							#{$type-key}-left: var(--padding-#{$value-key});
							#{$type-key}-right: var(--padding-#{$value-key});
						} @else if $position-key == vertical {
							#{$type-key}-bottom: var(--padding-#{$value-key});
							#{$type-key}-top: var(--padding-#{$value-key});
						} @else {
							@if $position-key == full {
								#{$type-key}: var(--padding-#{$value-key});
							} @else {
								#{$type-key}-#{$position-key}: var(--padding-#{$value-key});
							}
						}
					}

					.#{$device-prefix}hover\:#{$type-val}#{$position-val}#{$value-key} {
						&:hover {
							@if $position-key == horizontal {
								#{$type-key}-left: var(--padding-#{$value-key});
								#{$type-key}-right: var(--padding-#{$value-key});
							} @else if $position-key == vertical {
								#{$type-key}-bottom: var(--padding-#{$value-key});
								#{$type-key}-top: var(--padding-#{$value-key});
							} @else {
								@if $position-key == full {
									#{$type-key}: var(--padding-#{$value-key});
								} @else {
									#{$type-key}-#{$position-key}: var(--padding-#{$value-key});
								}
							}
						}
					}

					@if $type-key == margin {
						// Negative Margin
						.#{$device-prefix}-#{$type-val}#{$position-val}#{$value-key} {
							@if $position-key == horizontal {
								#{$type-key}-left: calc(-1 * var(--padding-#{$value-key}));
								#{$type-key}-right: calc(-1 * var(--padding-#{$value-key}));
							} @else if $position-key == vertical {
								#{$type-key}-bottom: calc(-1 * var(--padding-#{$value-key}));
								#{$type-key}-top: calc(-1 * var(--padding-#{$value-key}));
							} @else {
								@if $position-key == full {
									#{$type-key}: calc(-1 * var(--padding-#{$value-key}));
								} @else {
									#{$type-key}-#{$position-key}: calc(
										-1 * var(--padding-#{$value-key})
									);
								}
							}
						}

						.#{$device-prefix}hover\:-#{$type-val}#{$position-val}#{$value-key} {
							&:hover {
								@if $position-key == horizontal {
									#{$type-key}-left: calc(-1 * var(--padding-#{$value-key}));
									#{$type-key}-right: calc(-1 * var(--padding-#{$value-key}));
								} @else if $position-key == vertical {
									#{$type-key}-bottom: calc(-1 * var(--padding-#{$value-key}));
									#{$type-key}-top: calc(-1 * var(--padding-#{$value-key}));
								} @else {
									@if $position-key == full {
										#{$type-key}: calc(-1 * var(--padding-#{$value-key}));
									} @else {
										#{$type-key}-#{$position-key}: calc(
											-1 * var(--padding-#{$value-key})
										);
									}
								}
							}
						}
					}
				}

				@if $type-key == margin {
					// Auto Margin
					.#{$device-prefix}#{$type-val}#{$position-val}auto {
						@if $position-key == horizontal {
							#{$type-key}-left: auto;
							#{$type-key}-right: auto;
						} @else if $position-key == vertical {
							#{$type-key}-bottom: auto;
							#{$type-key}-top: auto;
						} @else {
							@if $position-key == 'full' {
								#{$type-key}: auto;
							} @else {
								#{$type-key}-#{$position-key}: auto;
							}
						}
					}

					.#{$device-prefix}hover\:#{$type-val}#{$position-val}auto {
						&:hover {
							@if $position-key == horizontal {
								#{$type-key}-left: auto;
								#{$type-key}-right: auto;
							} @else if $position-key == vertical {
								#{$type-key}-bottom: auto;
								#{$type-key}-top: auto;
							} @else {
								@if $position-key == 'full' {
									#{$type-key}: auto;
								} @else {
									#{$type-key}-#{$position-key}: auto;
								}
							}
						}
					}
				}
			}
		}

		@each $space in $position-spaces {
			.#{$device-prefix}gap-#{$space} {
				gap: var(--padding-#{$space});
			}

			.#{$device-prefix}gap-x-#{$space} {
				column-gap: var(--padding-#{$space});
			}

			.#{$device-prefix}gap-y-#{$space} {
				row-gap: var(--padding-#{$space});
			}
		}
	}
}