@use 'sass:math';

$utilities: (
    // Paddings
    "padding": (
        "prefix": "p",
        "states": true,
        "breakpoints": true,
        "values": $spacing-values
    ),

    "padding-left": (
        "prefix": "pl",
        "states": true,
        "breakpoints": true,
        "values": $spacing-values
    ),

    "padding-right": (
        "prefix": "pr",
        "states": true,
        "breakpoints": true,
        "values": $spacing-values
    ),

    "padding-top": (
        "prefix": "pt",
        "states": true,
        "breakpoints": true,
        "values": $spacing-values
    ),

    "padding-bottom": (
        "prefix": "pb",
        "states": true,
        "breakpoints": true,
        "values": $spacing-values
    ),

    // Margin utilities
    "margin": (
        "prefix": "m",
        "states": true,
        "breakpoints": true,
        "values": $spacing-values
    ),

    "margin-left": (
        "prefix": "ml",
        "states": true,
        "breakpoints": true,
        "values": $spacing-values
    ),

    "margin-right": (
        "prefix": "mr",
        "states": true,
        "breakpoints": true,
        "values": $spacing-values
    ),

    "margin-top": (
        "prefix": "mt",
        "states": true,
        "breakpoints": true,
        "values": $spacing-values
    ),

    "margin-bottom": (
        "prefix": "mb",
        "states": true,
        "breakpoints": true,
        "values": $spacing-values
    ),

    // New padding-x (left and right) - combine pl and pr
    "padding-x": (
        "prefix": "px",
        "states": true,
        "breakpoints": true,
        "values": $spacing-values
    ),

    // New padding-y (top and bottom) - combine pt and pb
    "padding-y": (
        "prefix": "py",
        "states": true,
        "breakpoints": true,
        "values": $spacing-values
    ),

    // New margin-x (left and right) - combine ml and mr
    "margin-x": (
        "prefix": "mx",
        "states": true,
        "breakpoints": true,
        "values": $spacing-values
    ),

    // New margin-y (top and bottom) - combine mt and mb
    "margin-y": (
        "prefix": "my",
        "states": true,
        "breakpoints": true,
        "values": $spacing-values
    ),

    // Width
    "width": (
        "prefix": "w",
        "states": true,
        "breakpoints": true,
        "values": map-merge($dimensions-values, ("screen": 100vw))
    ),

    // Max width
    "max-width": (
        "prefix": "max-w",
        "states": true,
        "breakpoints": true,
        "values": map-merge($dimensions-values, ("screen": 100vw))
    ),

    // Min width
    "min-width": (
        "prefix": "min-w",
        "states": true,
        "breakpoints": true,
        "values": map-merge($dimensions-values, ("screen": 100vw))
    ),

    // Height
    "height": (
        "prefix": "h",
        "states": true,
        "breakpoints": true,
        "values":  map-merge($dimensions-values, ("screen": 100vh))
    ),

    // Max height
    "max-height": (
        "prefix": "max-h",
        "states": true,
        "breakpoints": true,
        "values":  map-merge($dimensions-values, ("screen": 100vh))
    ),

    // Min height
    "min-height": (
        "prefix": "min-h",
        "states": true,
        "breakpoints": true,
        "values":  map-merge($dimensions-values, ("screen": 100vh))
    ),

    // Opacity
    "opacity": (
        "prefix": 'o',
        "states": true,
        "breakpoints": true,
        "values": (
            "0": 0,
            "10": 0.1,
            "20": 0.2,
            "30": 0.3,
            "40": 0.4,
            "50": 0.5,
            "60": 0.6,
            "70": 0.7,
            "80": 0.8,
            "90": 0.9,
            "100": 1,
        )
    ),

    // Border-radius
    "border-radius": (
        "prefix": "rounded",
        "states": true,
        "breakpoints": true,
        "values": $border-radius-values
    ),

    "border-start-start-radius": (
        "prefix": "rounded-ss",
        "states": true,
        "breakpoints": true,
        "values": $border-radius-values
    ),

    "border-start-end-radius": (
        "prefix": "rounded-se",
        "states": true,
        "breakpoints": true,
        "values": $border-radius-values
    ),

    "border-end-start-radius": (
        "prefix": "rounded-es",
        "states": true,
        "breakpoints": true,
        "values": $border-radius-values
    ),

    "border-end-end-radius": (
        "prefix": "rounded-ee",
        "states": true,
        "breakpoints": true,
        "values": $border-radius-values
    ),

    "border-top-radius": (
        "prefix": "rounded-t",
        "states": true,
        "breakpoints": true,
        "values": $border-radius-values
    ),

    "border-bottom-radius": (
        "prefix": "rounded-b",
        "states": true,
        "breakpoints": true,
        "values": $border-radius-values
    ),

    "border-left-radius": (
        "prefix": "rounded-l",
        "states": true,
        "breakpoints": true,
        "values": $border-radius-values
    ),

    "border-right-radius": (
        "prefix": "rounded-r",
        "states": true,
        "breakpoints": true,
        "values": $border-radius-values
    ),

    // Font sizes
    "font-size": (
        "prefix": "text",
        "states": true,
        "breakpoints": true,
        "values": $font-size-values
    ),

    // Font weight
    'font-weight': (
        "prefix": 'font',
        "states": true,
        "breakpoints": true,
        "values": (
            "thin": 100,
            "extralight": 200,
            "light": 300,
            "normal": 400,
            "medium": 500,
            "semibold": 600,
            "bold": 700,
            "extrabold": 800
        )
    ),

    // Font style
    "font-style": (
        "prefix": "font-style",
        "states": true,
        "breakpoints": true,
        "values": (
            "normal": normal,
            "italic": italic,
            "oblique": oblique
        )
    ),

    // Letter spacing
    "letter-spacing": (
        "prefix": "ls",
        "states": true,
        "breakpoints": true,
        "values": $letter-spacing-values
    ),

    // Text align
    "text-align": (
        "prefix": 'text',
        "states": false,
        "breakpoints": true,
        "values": (
            "start": start,
            "end": end,
            "center": center,
            "justify": justify
        )
    ),

    // Cursor
    "cursor": (
        "prefix": 'cursor',
        "states": false,
        "breakpoints": false,
        "values": (
            "auto": auto,
            "default": default,
            "pointer": pointer,
            "wait": wait,
            "text": text,
            "move": move,
            "help": help,
            "none": none,
            "cell": cell,
            "crosshair": crosshair,
            "alias": alias,
            "copy": copy,
            "grab": grab
        )
    ),

    // Justify content
    "justify-content": (
        "prefix": "justify",
        "states": false,
        "breakpoints": true,
        "values": (
            "center": center,
            "start": start,
            "end": end,
            "between": space-between,
            "around": space-around
        )
    ),

    // Align items
    "align-items": (
        "prefix": "items",
        "states": false,
        "breakpoints": true,
        "values": (
            "center": center,
            "start": start,
            "end": end
        )
    ),

    // Flex direction
    "flex-direction": (
        "prefix": 'flex',
        "states": false,
        "breakpoints": true,
        "values": (
            "row": row,
            "row-reverse": row-reverse,
            "column": column,
            "column-reverse": column-reverse,
        )
    ),

    // Flex wrap
    "flex-wrap": (
        "prefix": "flex",
        "states": false,
        "breakpoints": true,
        "values": (
            "nowrap": nowrap,
            "wrap": wrap,
            "wrap-reverse": wrap-reverse
        )
    ),

    // Border-width
    "border-width": (
        "prefix": "border",
        "states": true,
        "breakpoints": true,
        "values": $border-outline-widths
    ),

    // Border-inline-width
    "border-inline-width": (
        "prefix": "border-x",
        "states": true,
        "breakpoints": true,
        "values": $border-outline-widths
    ),

    // Border-block-width
    "border-block-width": (
        "prefix": "border-y",
        "states": true,
        "breakpoints": true,
        "values": $border-outline-widths
    ),

    // Border-top-width
    "border-top-width": (
        "prefix": "border-t",
        "states": true,
        "breakpoints": true,
        "values": $border-outline-widths
    ),

    // Border-bottom-width
    "border-bottom-width": (
        "prefix": "border-b",
        "states": true,
        "breakpoints": true,
        "values": $border-outline-widths
    ),

    // Border-left-width
    "border-left-width": (
        "prefix": "border-l",
        "states": true,
        "breakpoints": true,
        "values": $border-outline-widths
    ),

    // Border-right-width
    "border-right-width": (
        "prefix": "border-r",
        "states": true,
        "breakpoints": true,
        "values": $border-outline-widths
    ),

    // Border-style
    "border-style": (
        "prefix": "border",
        "states": true,
        "breakpoints": true,
        "values": $border-outline-styles
    ),

    // Border-inline-style
    "border-inline-style": (
        "prefix": "border-x",
        "states": true,
        "breakpoints": true,
        "values": $border-outline-styles
    ),

    // Border-block-style
    "border-block-style": (
        "prefix": "border-y",
        "states": true,
        "breakpoints": true,
        "values": $border-outline-styles
    ),

    // Border-top-style
    "border-top-style": (
        "prefix": "border-t",
        "states": true,
        "breakpoints": true,
        "values": $border-outline-styles
    ),

    // Border-bottom-style
    "border-bottom-style": (
        "prefix": "border-b",
        "states": true,
        "breakpoints": true,
        "values": $border-outline-styles
    ),

    // Border-left-style
    "border-left-style": (
        "prefix": "border-l",
        "states": true,
        "breakpoints": true,
        "values": $border-outline-styles
    ),

    // Border-right-style
    "border-right-style": (
        "prefix": "border-r",
        "states": true,
        "breakpoints": true,
        "values": $border-outline-styles
    ),

    // Outline-width
    "outline-width": (
        "prefix": "outline",
        "states": true,
        "breakpoints": true,
        "values": $border-outline-widths
    ),

    // Outline-styles
    "outline-style": (
        "prefix": "outline",
        "states": true,
        "breakpoints": true,
        "values": $border-outline-styles
    ),

    // Outline offset
    "outline-offset": (
        "prefix": "outline-offset",
        "states": true,
        "breakpoints": true,
        "values": $outline-offsets
    ),

    // Background attachment
    "background-attachment": (
        "prefix": "attachment",
        "states": false,
        "breakpoints": true,
        "values": (
            "scroll": scroll,
            "fixed": fixed,
            "local": local
        )
    ),

    // Background position
    "background-position": (
        "prefix": "bg",
        "states": false,
        "breakpoints": true,
        "values": (
            "top": top,
            "bottom": bottom,
            "left": left,
            "right": right,
            "center": center
        )
    ),

    // Background repeat
    "background-repeat": (
        "prefix": "bg",
        "states": false,
        "breakpoints": true,
        "values": (
            "repeat": repeat,
            "repeat-x": repeat-x,
            "repeat-y": repeat-y,
            "space": space,
            "round": round,
            "no-repeat": no-repeat
        )
    ),

    // Background size
    "background-size": (
        "prefix": "bg",
        "states": false,
        "breakpoints": true,
        "values": (
            "cover": cover,
            "contain": contain
        )
    ),

    // Top
    "top": (
        "prefix": "top",
        "negative_values": true,
        "states": false,
        "breakpoints": true,
        "values": $positioning-spacing-map
    ),

    // Bottom
    "bottom": (
        "prefix": "bottom",
        "negative_values": true,
        "states": false,
        "breakpoints": true,
        "values": $positioning-spacing-map
    ),

    // Left
    "left": (
        "prefix": "left",
        "negative_values": true,
        "states": false,
        "breakpoints": true,
        "values": $positioning-spacing-map
    ),

    // Right
    "right": (
        "prefix": "right",
        "negative_values": true,
        "states": false,
        "breakpoints": true,
        "values": $positioning-spacing-map
    ),

    // Z-index
    "z-index": (
        "prefix": "z",
        "states": false,
        "breakpoints": false,
        "negative_values": true,
        "values": (
            "1": 1,
            "2": 2,
            "3": 3,
            "4": 4,
            "5": 5,
            "6": 6,
            "7": 7,
            "8": 8,
            "9": 9,
            "10": 10,
        )
    ),

    // Object-fit
    "object-fit": (
        "prefix": "object",
        "states": false,
        "breakpoints": true,
        "values": (
            "contain": contain,
            "cover": cover,
            "fill": fill,
            "none": none,
            "scale-down": scale-down
        )
    ),

    // Object-position
    "object-position": (
        "prefix": "object",
        "states": false,
        "breakpoints": true,
        "values": (
            "top": top,
            "bottom": bottom,
            "left": left,
            "right": right,
            "center": center,
            "left-top": left top,
            "left-bottom": left bottom,
            "right-top": right top,
            "right-bottom": right bottom,
        )
    ),

    // Overflow, overflow-x overflow-y
    "overflow": (
        "prefix": "overflow",
        "states": false,
        "breakpoints": false,
        "values": (
            "auto": auto,
            "hidden": hidden,
            "clip": clip,
            "visible": visible,
            "scroll": scroll,
        )
    ),

    "overflow-x": (
        "prefix": "overflow-x",
        "states": false,
        "breakpoints": false,
        "values": (
            "auto": auto,
            "hidden": hidden,
            "clip": clip,
            "visible": visible,
            "scroll": scroll,
        )
    ),

    "overflow-y": (
        "prefix": "overflow-y",
        "states": false,
        "breakpoints": false,
        "values": (
            "auto": auto,
            "hidden": hidden,
            "clip": clip,
            "visible": visible,
            "scroll": scroll,
        )
    ),

    // User select
    "user-select": (
        "prefix": "select",
        "states": false,
        "breakpoints": false,
        "values": (
            "none": none,
            "text": text,
            "all": all,
            "auto": auto
        )
    ),

    // User select
    "-webkit-user-select": (
        "prefix": "select",
        "states": false,
        "breakpoints": false,
        "values": (
            "none": none,
            "text": text,
            "all": all,
            "auto": auto
        )
    ),

    // Scroll behavior
    "scroll-behavior": (
        "prefix": "scroll",
        "states": false,
        "breakpoints": false,
        "negative_values": false,
        "values": (
            "auto": auto,
            "smooth": smooth,
        )
    ),

    // Resize
    "resize": (
        "prefix": "resize",
        "states": false,
        "breakpoints": false,
        "values": (
            "none": none,
            "both": both,
            "vertical": vertical,
            "horizontal": horizontal,
        )
    ),

    // Transition duration
    "transition-duration": (
        "prefix": "duration",
        "states": false,
        "breakpoints": false,
        "values": $transition-durations
    ),

    // Transition delay
    "transition-delay": (
        "prefix": "delay",
        "states": false,
        "breakpoints": false,
        "values": $transition-delays
    ),

    // Word breake
    "word-break": (
        "prefix": "break",
        "states": false,
        "breakpoints": false,
        "values": (
            "all": "break-all",
            "keep": "keep-all",
            "normal": normal
        )
    )
);


// Define a list of text decoration values
$text-decoration-values: underline, overline, line-through, no-underline;

// Define a list of text transform values
$text-transform-values: uppercase, lowercase, capitalize, normal-case;

// Define a list of transition timing function values
$transition-timing-function_values: linear, ease-in, ease-out, ease-in-out, ease;


// iterate over each value in the $transition-timing-function_values
@each $val in $transition-timing-function_values {
    .#{$val} {
        transition-timing-function: $val;
    }
}


// Iterate over each text-decoration value in $text-decoration-values
@each $key in $text-decoration-values {
    // Generate class for each value
    @if $key == "no-underline" {
        // Check if the $ket value is no-underline
        .#{$key} {
            text-decoration: none;
        }
    } @else {
        .#{$key} {
            text-decoration: $key;
        }
    }


    // Iterate over each state value to generate states for each property
    @each $state in $state-selectors {
        @if $key == "no-underline" {
            // Check if the $ket value is no-underline
            .#{$state}\:#{$key}:#{$state} {
                text-decoration: none !important;
            }
        } @else {
            .#{$state}\:#{$key}:#{$state} {
                text-decoration: $key !important;
            }
        }
    }


    // Iterate over each bp_key-bp_val pair to generate classes for each breakpoint
    @each $bp_key, $bp-val in $breakpoints {
        @media (min-width: $bp_val) {
            // Generate class for each value
            @if $key == "no-underline" {
                // Check if the $ket value is no-underline
                .#{$bp_key}\:#{$key} {
                    text-decoration: none;
                }
            } @else {
                .#{$bp_key}\:#{$key} {
                    text-decoration: $key;
                }
            }


            // Iterate over each state value to generate states for each property
            @each $state in $state-selectors {
                // Create special classes for each state
                @if $key == "no-underline" {
                    // Check if the $ket value is no-underline
                    .#{$bp_key}\:#{$state}\:#{$key}:#{$state} {
                        text-decoration: none !important;
                    }
                } @else {
                    .#{$bp_key}\:#{$state}\:#{$key}:#{$state} {
                        text-decoration: $key !important;
                    }
                }
            }
        }
    }
}


// Iterate over each text-transform value in $text-transform-values
@each $key in $text-transform-values {
    // Generate class for each value
    @if $key == "normal-case" {
        // Check if the $ket value is normal-case
        .#{$key} {
            text-transform: none;
        }
    } @else {
        .#{$key} {
            text-transform: $key;
        }
    }


    // Iterate over each state value to generate states for each property
    @each $state in $state-selectors {
        @if $key == "normal-case" {
            // Check if the $ket value is normal-case
            .#{$state}\:#{$key}:#{$state} {
                text-transform: none !important;
            }
        } @else {
            .#{$state}\:#{$key}:#{$state} {
                text-transform: $key !important;
            }
        }
    }


    // Iterate over each bp_key-bp_val pair to generate classes for each breakpoint
    @each $bp_key, $bp-val in $breakpoints {
        @media (min-width: $bp_val) {
            // Generate class for each value
            @if $key == "normal-case" {
                // Check if the $ket value is normal-case
                .#{$bp_key}\:#{$key} {
                    text-transform: none;
                }
            } @else {
                .#{$bp_key}\:#{$key} {
                    text-transform: $key;
                }
            }


            // Iterate over each state value to generate states for each property
            @each $state in $state-selectors {
                // Create special classes for each state
                @if $key == "normal-case" {
                    // Check if the $ket value is normal-case
                    .#{$bp_key}\:#{$state}\:#{$key}:#{$state} {
                        text-transform: none !important;
                    }
                } @else {
                    .#{$bp_key}\:#{$state}\:#{$key}:#{$state} {
                        text-transform: $key !important;
                    }
                }
            }
        }
    }
}


// Helper function to handle shorthand properties (x, y) dynamically
@function get-shorthand-property($property) {
    @if $property == "padding-x" {
        @return ("padding-left", "padding-right");
    }

    @else if $property == "padding-y" {
        @return ("padding-top", "padding-bottom");
    }

    @else if $property == "margin-x" {
        @return ("margin-left", "margin-right");
    }

    @else if $property == "margin-y" {
        @return ("margin-top", "margin-bottom");
    }

    @else if $property == "border-top-radius" {
        @return ("border-start-start-radius", "border-start-end-radius");
    }

    @else if $property == "border-bottom-radius" {
        @return ("border-end-start-radius", "border-end-end-radius");
    }

    @else if $property == "border-left-radius" {
        @return ("border-start-start-radius", "border-end-start-radius");
    }

    @else if $property == "border-right-radius" {
        @return ("border-end-start-radius", "border-end-end-radius");
    }

    @else {
        @return $property;
    }
}


// Iterate over each property-map pair in the $utilities map
@each $property, $map in $utilities {
    $prefix: map-get($map, "prefix"); // Define prefix variable
    $states: map-get($map, "states"); // Define state variable
    $values: map-get($map, "values"); // Define values variable with a map of values
    $negative_values: map-get($map, "negative_values"); // Define negative variable
    $allow-breakpoints: map-get($map, "breakpoints"); // Define allow_breakpoint variable

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

        // Check if the $key value is equal to 'default' to make the prefix shorter
        @if $key =='default' {
            .#{$prefix} {
                #{$property}: #{$val} !important;
            }

            // Check if the property can have states
            @if $states {
                // Iterate over each state value to generate states for each property
                @each $state in $state-selectors {
                    // Create special classes for each state
                    .#{$state}\:#{$prefix}:#{$state} {
                        #{$property}: #{$val} !important;
                    }
                }
            }


            // Check if the breakpoint styles is allowed
            @if $allow-breakpoints {
            // Iterate over each bp_key-bp_val pair to generate classes for each breakpoint
                @each $bp_key, $bp-val in $breakpoints {
                    @media (min-width: $bp_val) {
                        .#{$bp_key}\:#{$prefix} {
                            #{$property}: #{$val} !important;
                        }

                        // Check if the property can have states
                        @if $states {
                            // Iterate over each state value to generate states for each property
                            @each $state in $state-selectors {
                                // Create special classes for each state
                                .#{$bp_key}\:#{$state}\:#{$prefix}:#{$state} {
                                    #{$property}: #{$val} !important;
                                }
                            }
                        }
                    }
                }
            }
        }

        @else {
            // Define a class for each property in the utilities map
            .#{$prefix}-#{$key} {
                // Get the shorthand properties if it's one of the x/y shorthand types
                $expanded-properties: get-shorthand-property($property);

                // Apply the rule for expanded properties or the regular property
                @if $expanded-properties !=$property {
                    @each $expanded-property in $expanded-properties {
                        #{$expanded-property}: #{$val} !important;
                    }
                }

                @else {
                    #{$property}: #{$val} !important;
                }
            }

            // Check if the property has negative values
            @if $negative_values {
                .-#{$prefix}-#{$key} {
                    // Get the shorthand properties if it's one of the x/y shorthand types
                    $expanded-properties: get-shorthand-property($property);

                    // Apply the rule for expanded properties or the regular property
                    @if $expanded-properties !=$property {
                        @each $expanded-property in $expanded-properties {
                            #{$expanded-property}: -#{$val} !important;
                        }
                    }

                    @else {
                        #{$property}: -#{$val} !important;
                    }
                }
            }


            // Check if the property can have states
            @if $states {
                // Iterate over each state value to generate states for each property
                @each $state in $state-selectors {
                    // Create special classes for each state
                    .#{$state}\:#{$prefix}-#{$key}:#{$state} {
                        // Get the shorthand properties if it's one of the x/y shorthand types
                        $expanded-properties: get-shorthand-property($property);

                        // Apply the rule for expanded properties or the regular property
                        @if $expanded-properties !=$property {
                            @each $expanded-property in $expanded-properties {
                                #{$expanded-property}: #{$val} !important;
                            }
                        }

                        @else {
                            #{$property}: #{$val} !important;
                        }
                    }

                    // Check if the property has negative values
                    @if $negative_values {
                        // Create special classes for each state
                        .#{$state}\:-#{$prefix}-#{$key}:#{$state} {
                            // Get the shorthand properties if it's one of the x/y shorthand types
                            $expanded-properties: get-shorthand-property($property);

                            // Apply the rule for expanded properties or the regular property
                            @if $expanded-properties !=$property {
                                @each $expanded-property in $expanded-properties {
                                    #{$expanded-property}: -#{$val} !important;
                                }
                            }

                            @else {
                                #{$property}: -#{$val} !important;
                            }
                        }
                    }
                }
            }

            @if $allow-breakpoints {
            // Iterate over each bp_key-bp_val pair to generate classes for each breakpoint
                @each $bp_key, $bp-val in $breakpoints {
                    @media (min-width: $bp_val) {
                        .#{$bp_key}\:#{$prefix}-#{$key} {
                            // Get the shorthand properties if it's one of the x/y shorthand types
                            $expanded-properties: get-shorthand-property($property);

                            // Apply the rule for expanded properties or the regular property
                            @if $expanded-properties !=$property {
                                @each $expanded-property in $expanded-properties {
                                    #{$expanded-property}: #{$val} !important;
                                }
                            }

                            @else {
                                #{$property}: #{$val} !important;
                            }
                        }


                        // Check if the property has negative values
                        @if $negative_values {
                            .#{$bp_key}\:-#{$prefix}-#{$key} {
                                // Get the shorthand properties if it's one of the x/y shorthand types
                                $expanded-properties: get-shorthand-property($property);

                                // Apply the rule for expanded properties or the regular property
                                @if $expanded-properties !=$property {
                                    @each $expanded-property in $expanded-properties {
                                        #{$expanded-property}: -#{$val} !important;
                                    }
                                }

                                @else {
                                    #{$property}: -#{$val} !important;
                                }
                            }
                        }


                        // Check if the property can have states
                        @if $states {
                            // Iterate over each state value to generate states for each property
                            @each $state in $state-selectors {
                                // Create special classes for each state
                                .#{$bp_key}\:#{$state}\:#{$prefix}-#{$key}:#{$state} {
                                    // Get the shorthand properties if it's one of the x/y shorthand types
                                    $expanded-properties: get-shorthand-property($property);

                                    // Apply the rule for expanded properties or the regular property
                                    @if $expanded-properties !=$property {
                                        @each $expanded-property in $expanded-properties {
                                            #{$expanded-property}: #{$val} !important;
                                        }
                                    }

                                    @else {
                                        #{$property}: #{$val} !important;
                                    }
                                }

                                // Check if the property has negative values
                                @if $negative_values {
                                    // Create special classes for each state
                                    .#{$bp_key}\:#{$state}\:-#{$prefix}-#{$key}:#{$state} {
                                        // Get the shorthand properties if it's one of the x/y shorthand types
                                        $expanded-properties: get-shorthand-property($property);

                                        // Apply the rule for expanded properties or the regular property
                                        @if $expanded-properties !=$property {
                                            @each $expanded-property in $expanded-properties {
                                                #{$expanded-property}: -#{$val} !important;
                                            }
                                        }

                                        @else {
                                            #{$property}: -#{$val} !important;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}