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

// $transforms-position-spaces replaced by generated $padding-names from sizing map

// Rotate, scale, and translate transform classes
@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 $space-key in $padding-names {
			.#{$device-prefix}translate-#{$space-key},
			.#{$device-prefix}hover\:translate-#{$space-key}:hover,
			.#{$device-prefix}focus\:translate-#{$space-key}:focus,
			.#{$device-prefix}group:hover .group-hover\:translate-#{$space-key},
			.#{$device-prefix}group:focus-within
				.group-focus-within\:translate-#{$space-key} {
				transform: translate(
					var(--padding-#{$space-key}),
					var(--padding-#{$space-key})
				);
			}

			.#{$device-prefix}translate-x-#{$space-key},
			.#{$device-prefix}hover\:translate-x-#{$space-key}:hover,
			.#{$device-prefix}focus\:translate-x-#{$space-key}:focus,
			.#{$device-prefix}group:hover .group-hover\:translate-x-#{$space-key},
			.#{$device-prefix}group:focus-within
				.group-focus-within\:translate-x-#{$space-key} {
				transform: translateX(var(--padding-#{$space-key}));
			}

			.#{$device-prefix}translate-y-#{$space-key},
			.#{$device-prefix}hover\:translate-y-#{$space-key}:hover,
			.#{$device-prefix}focus\:translate-y-#{$space-key}:focus,
			.#{$device-prefix}group:hover .group-hover\:translate-y-#{$space-key},
			.#{$device-prefix}group:focus-within
				.group-focus-within\:translate-y-#{$space-key} {
				transform: translateY(var(--padding-#{$space-key}));
			}

			.#{$device-prefix}-translate-#{$space-key},
			.#{$device-prefix}hover\:-translate-#{$space-key}:hover,
			.#{$device-prefix}focus\:-translate-#{$space-key}:focus,
			.#{$device-prefix}group:hover .group-hover\:-translate-#{$space-key},
			.#{$device-prefix}group:focus-within
				.group-focus-within\:-translate-#{$space-key} {
				transform: translate(
					calc(-1 * var(--padding-#{$space-key})),
					calc(-1 * var(--padding-#{$space-key}))
				);
			}

			.#{$device-prefix}-translate-x-#{$space-key},
			.#{$device-prefix}hover\:-translate-x-#{$space-key}:hover,
			.#{$device-prefix}focus\:-translate-x-#{$space-key}:focus,
			.#{$device-prefix}group:hover .group-hover\:-translate-x-#{$space-key},
			.#{$device-prefix}group:focus-within
				.group-focus-within\:-translate-x-#{$space-key} {
				transform: translateX(calc(-1 * var(--padding-#{$space-key})));
			}

			.#{$device-prefix}-translate-y-#{$space-key},
			.#{$device-prefix}hover\:-translate-y-#{$space-key}:hover,
			.#{$device-prefix}focus\:-translate-y-#{$space-key}:focus,
			.#{$device-prefix}group:hover .group-hover\:-translate-y-#{$space-key},
			.#{$device-prefix}group:focus-within
				.group-focus-within\:-translate-y-#{$space-key} {
				transform: translateY(calc(-1 * var(--padding-#{$space-key})));
			}
		}

		.flip-h {
			transform: scaleX(-1);
		}

		.flip-v {
			transform: scaleY(-1);
		}

		// Change to increments, or 1.0 deprecate
		@for $i from 0 through 360 {
			.#{$device-prefix}-rotate-#{$i},
			.#{$device-prefix}hover\:-rotate-#{$i}:hover,
			.#{$device-prefix}focus\:-rotate-#{$i}:focus,
			.#{$device-prefix}group:hover .group-hover\:-rotate-#{$i},
			.#{$device-prefix}group:focus-within .group-focus-within\:-rotate-#{$i} {
				transform: rotate(string.unquote('-#{$i}deg'));
			}
		}

		// Change to increments, or 1.0 deprecate
		@for $i from 0 through 360 {
			.#{$device-prefix}rotate-#{$i},
			.#{$device-prefix}hover\:rotate-#{$i}:hover,
			.#{$device-prefix}focus\:rotate-#{$i}:focus,
			.#{$device-prefix}group:hover .group-hover\:rotate-#{$i},
			.#{$device-prefix}group:focus-within .group-focus-within\:rotate-#{$i} {
				transform: rotate(string.unquote('#{$i}deg'));
			}
		}

		// Change to increments, or 1.0 deprecate
		@for $i from 0 through 30 {
			.#{$device-prefix}scale-#{$i},
			.#{$device-prefix}hover\:scale-#{$i}:hover,
			.#{$device-prefix}focus\:scale-#{$i}:focus,
			.#{$device-prefix}group:hover .group-hover\:scale-#{$i},
			.#{$device-prefix}group:focus-within .group-focus-within\:scale-#{$i} {
				transform: scale(0.1 * $i);
			}
		}

		// Device Breakpoints End
	}
}