// Create a map of the CSS transform properties
$transform-utils: (
    // Transform translate X
    "translate": (
        "prefix": "translate-x",
        "values": $translate-spacing-map
    ),

    // Transform translate Y
    "translateY": (
        "prefix": "translate-y",
        "values": $translate-spacing-map
    ),

    // Transform rotate
    "rotate": (
        "prefix": "rotate",
        "values": $rotate-degrees
    ),

    // Transform scale
    "scale": (
        "prefix": "scale",
        "values": $scale-values
    ),

    // Transform skew
    "skew": (
        "prefix": "skew",
        "values": $skew-values
    ),
);



// Define a list of transform-origin values
$transform-origin-positions: (
    "top-left": top left,
    "top": top,
    "top-right": top right,
    "right": right,
    "bottom-right": bottom right,
    "bottom": bottom,
    "bottom-left": bottom left,
    "left": left,
    "center": center
);

// Iterate over each $val in $ $transform-origin-positions
@each $key, $val in $transform-origin-positions {
    // Generate classes for each element of the $transform-origin-positions list
    .origin-#{$key} {
        transform-origin: $val;
    }

    // Iterate over each state in the $state-selectors
    @each $state in $state-selectors {
        // Generate classes for each state
        .#{$state}\:origin-#{$key}:#{$state} {
            transform-origin: $val;
        }
    }

    // Iterate over each bp_key-bp_val pair in the $breakpoints
    @each $bp_key, $bp_val in $breakpoints {
        // Generate media queries for screen with a minimum screen of $bp_val
        @media (min-width: $bp_val) {
            // Generate classes for each element of the $transform-origin-positions list
            .#{$bp_key}\:origin-#{$key} {
                transform-origin: $val;
            }

            // Iterate over each state in the $state-selectors
            @each $state in $state-selectors {
                // Generate classes for each state
                .#{$bp_key}\:#{$state}\:origin-#{$key}:#{$state} {
                    transform-origin: $val;
                }
            }
        }
    }
}



// Iterate over each property-map pair in the $transform-utils
@each $property, $map in $transform-utils {
    $prefix: map-get($map, "prefix"); // Extract the property prefix name
    $values: map-get($map, "values"); // Extract the property values

    // Iterate over each key-val pair in the $values map
    @each $key, $val in $values {

        /* Check if the value is not equal to the translateY, skew, because
        they would be generated separately */
        @if ($property != "translateY" and $property != "skew") {

            // Generate classes for each property
            .#{$prefix}-#{$key} {
                #{$property}: $val;
            }

            // Generate classes for each property with negative value
            .-#{$prefix}-#{$key} {
                #{$property}: -#{$val};
            }

            // Iterate over each state in $states
            @each $state in $state-selectors {
                // Generate classes for each state
                .#{$state}\:#{$prefix}-#{$key}:#{$state} {
                    #{$property}: $val !important;
                }

                .-#{$state}\:#{$prefix}-#{$key}:#{$state} {
                    #{$property}: -#{$val} !important;
                }
            }


            // Iterate over each bp_key-bp_val pair in the $breakpoints
            @each $bp_key, $bp_val in $breakpoints {
                // Generate media queries for screens with a minimum screen of $bp_val
                @media (min-width: $bp_val) {
                    // Generate classes for each breakpoint value

                    // Generate classes for each property
                    .#{$bp_key}\:#{$prefix}-#{$key} {
                        #{$property}: $val;
                    }

                    // Generate classes for each property with negative value
                    .#{$bp_key}\:-#{$prefix}-#{$key} {
                        #{$property}: -#{$val};
                    }

                    // Iterate over each state in $states
                    @each $state in $state-selectors {
                        // Generate classes for each state
                        .#{$bp_key}\:#{$state}\:#{$prefix}-#{$key}:#{$state} {
                            #{$property}: $val !important;
                        }

                        .#{$bp_key}\:#{$state}\:-#{$prefix}-#{$key}:#{$state} {
                            #{$property}: -#{$val} !important;
                        }
                    }
                }
            }
        } @else if ($property == "translateY" or $property == "skew") {
            // Generate classes for each property
            .#{$prefix}-#{$key} {
                transform: #{$property}(#{$val});
            }

            // Generate classes for each property with negative value
            .-#{$prefix}-#{$key} {
                transform: #{$property}(#{$val});
            }

            // Iterate over each state in $states
            @each $state in $state-selectors {
                // Generate classes for each state
                .#{$state}\:#{$prefix}-#{$key}:#{$state} {
                    transform: #{$property}(#{$val}) !important;
                }

                .-#{$state}\:#{$prefix}-#{$key}:#{$state} {
                    transform: #{$property}(#{$val}) !important;
                }
            }


            // Iterate over each bp_key-bp_val pair in the $breakpoints
            @each $bp_key, $bp_val in $breakpoints {
                // Generate media queries for screens with a minimum screen of $bp_val
                @media (min-width: $bp_val) {
                    // Generate classes for each breakpoint value

                    // Generate classes for each property
                    .#{$bp_key}\:#{$prefix}-#{$key} {
                        transform: #{$property}(#{$val});
                    }

                    // Generate classes for each property with negative value
                    .#{$bp_key}\:-#{$prefix}-#{$key} {
                        transform: #{$property}(#{$val});
                    }

                    // Iterate over each state in $states
                    @each $state in $state-selectors {
                        // Generate classes for each state
                        .#{$bp_key}\:#{$state}\:#{$prefix}-#{$key}:#{$state} {
                            transform: #{$property}(#{$val}) !important;
                        }

                        .#{$bp_key}\:#{$state}\:-#{$prefix}-#{$key}:#{$state} {
                            transform: #{$property}(#{$val}) !important;
                        }
                    }
                }
            }
        }
    }
}