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

$brandui-spacing-containers: (
	'auto': auto,
	'fit': fit-content,
	'max': max-content,
	'min': min-content,
	'full': 100%,
	'viewport': 100v
);
$brandui-spacing-sizings: (
	'width': w,
	'height': h
);
$brandui-spacing-min-max: (
	'huge': var(--padding-huge),
	'extra-large': var(--padding-extra-large),
	'large': var(--padding-large),
	'medium': var(--padding-medium),
	'small': var(--padding-small),
	'extra-small': var(--padding-extra-small),
	'slim': var(--padding-slim),
	'thin': var(--padding-thin),
	'hairline': var(--padding-hairline),
	'none': 0,
	'full': 100%,
	'content': max-content,
	'viewport': 100v,
	'viewport-9': 90v,
	'viewport-8': 80v,
	'viewport-7': 70v,
	'viewport-6': 60v,
	'viewport-5': 50v,
	'viewport-4': 40v,
	'viewport-3': 30v,
	'viewport-2': 20v,
	'viewport-1': 10v
);
$brandui-media-aspect-ratios: (
	'headshot': (
		'width': '320',
		'height': '320'
	),
	'banner': (
		'width': '1200',
		'height': '630'
	),
	'hero': (
		'width': '615',
		'height': '377'
	),
	'media-asset': (
		'width': '619',
		'height': '396'
	),
	'media-card': (
		'width': '330',
		'height': '130'
	),
	'logo': (
		'width': '268',
		'height': '102'
	)
);

@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

		// Container Sizing
		@each $sizing-key, $sizing-val in $brandui-spacing-sizings {
			@each $value-key, $value-val in $brandui-spacing-containers {
				// Layout Width & Height
				.#{$device-prefix}#{$sizing-val}-#{$value-key} {
					@if string.index($value-key, viewport) {
						#{$sizing-key}: string.unquote('#{$value-val}#{$sizing-val}');
					} @else {
						#{$sizing-key}: $value-val;
					}
				}

				.#{$device-prefix}hover\:#{$sizing-val}-#{$value-key} {
					&:hover {
						@if string.index($value-key, viewport) {
							#{$sizing-key}: string.unquote('#{$value-val}#{$sizing-val}');
						} @else {
							#{$sizing-key}: $value-val;
						}
					}
				}
			}
		}

		@each $value-key, $value-val in $brandui-spacing-min-max {
			// Max Widths & Heights
			@if string.index($value-key, viewport) {
				.#{$device-prefix}h-#{$value-key} {
					height: string.unquote('#{$value-val}h');
				}

				.#{$device-prefix}w-#{$value-key} {
					width: string.unquote('#{$value-val}w');
				}

				.#{$device-prefix}min-#{$value-key} {
					min-height: string.unquote('#{$value-val}h');
					min-width: string.unquote('#{$value-val}w');
				}

				.#{$device-prefix}min-h-#{$value-key} {
					min-height: string.unquote('#{$value-val}h');
				}

				.#{$device-prefix}min-w-#{$value-key} {
					min-width: string.unquote('#{$value-val}w');
				}

				.#{$device-prefix}max-#{$value-key} {
					max-height: string.unquote('#{$value-val}h');
					max-width: string.unquote('#{$value-val}w');
				}

				.#{$device-prefix}max-h-#{$value-key} {
					max-height: string.unquote('#{$value-val}h');
				}

				.#{$device-prefix}max-w-#{$value-key} {
					max-width: string.unquote('#{$value-val}w');
				}
			} @else {
				.#{$device-prefix}h-#{$value-key} {
					height: $value-val;
				}

				.#{$device-prefix}w-#{$value-key} {
					width: $value-val;
				}

				.#{$device-prefix}min-#{$value-key} {
					min-height: $value-val;
					min-width: $value-val;
				}

				.#{$device-prefix}min-h-#{$value-key} {
					min-height: $value-val;
				}

				.#{$device-prefix}min-w-#{$value-key} {
					min-width: $value-val;
				}

				.#{$device-prefix}max-#{$value-key} {
					max-height: $value-val;
					max-width: $value-val;
				}

				.#{$device-prefix}max-h-#{$value-key} {
					max-height: $value-val;
				}

				.#{$device-prefix}max-w-#{$value-key} {
					max-width: $value-val;
				}
			}
		}

		@for $i from 1 through 12 {
			.#{$device-prefix}h-#{$i} {
				height: calc((var(--content-max) / 12) * #{$i});
			}

			.#{$device-prefix}w-#{$i} {
				width: calc((var(--content-max) / 12) * #{$i});
			}

			.#{$device-prefix}min-#{$i} {
				min-height: calc((var(--content-max) / 12) * #{$i});
				min-width: calc((var(--content-max) / 12) * #{$i});
			}

			.#{$device-prefix}min-h-#{$i} {
				min-height: calc((var(--content-max) / 12) * #{$i});
			}

			.#{$device-prefix}min-w-#{$i} {
				min-width: calc((var(--content-max) / 12) * #{$i});
			}

			.#{$device-prefix}max-#{$i} {
				max-height: calc((var(--content-max) / 12) * #{$i});
				max-width: calc((var(--content-max) / 12) * #{$i});
			}

			.#{$device-prefix}max-h-#{$i} {
				max-height: calc((var(--content-max) / 12) * #{$i});
			}

			.#{$device-prefix}max-w-#{$i} {
				max-width: calc((var(--content-max) / 12) * #{$i});
			}
		}

		// Media Aspect Ratios
		.#{$device-prefix}aspect-ratio-square {
			aspect-ratio: 1 / 1;
		}

		.#{$device-prefix}aspect-ratio-video {
			aspect-ratio: 16 / 9;
		}

		@each $ratio-key, $ratio-val in $brandui-media-aspect-ratios {
			.#{$device-prefix}aspect-ratio-#{$ratio-key} {
				aspect-ratio: string.unquote(
					"#{map.get($ratio-val, 'width')} / #{map.get($ratio-val, 'height')}"
				);
			}
		}

		// Media Aspect Ratios Max Sizes
		@each $ratio-key, $ratio-val in $brandui-media-aspect-ratios {
			.#{$device-prefix}max-size-#{$ratio-key} {
				max-width: string.unquote('#{map.get($ratio-val, 'width')}px');
				max-height: string.unquote('#{map.get($ratio-val, 'height')}px');
			}
		}

		// Device Breakpoints End
	}
}