// _spacing.scss

@use "sass:math";
@use "sass:string" as str;
@use "../config/feature-flags" as config-flags;
@use "../config/spacing" as config-spacing;
@use "../config/breakpoints" as config-breakpoint;
@use "../functions/feature-flags" as fn-flags;
@use "../functions/units" as fn-units;
@use "../tools/container-queries" as Q;
@use "../tools/media-queries" as MQ;

@mixin width($value) {
    width: fn-units.fix-units($value);
}
@mixin height($value) {
    height: fn-units.fix-units($value);
}
@mixin min-width($value) {
    min-width: fn-units.fix-units($value);
}
@mixin min-height($value) {
    min-height: fn-units.fix-units($value);
}
@mixin max-width($value) {
    max-width: fn-units.fix-units($value);
}
@mixin max-height($value) {
    max-height: fn-units.fix-units($value);
}
@mixin width-percent($i) {
    width: str.unquote($i + "%");
}
@mixin height-percent($i) {
    height: str.unquote($i + "%");
}
@mixin min-width-percent($i) {
    min-width: str.unquote($i + "%");
}
@mixin min-height-percent($i) {
    min-height: str.unquote($i + "%");
}
@mixin max-width-percent($i) {
    max-width: str.unquote($i + "%");
}
@mixin max-height-percent($i) {
    max-height: str.unquote($i + "%");
}

@mixin w-auto {
    @include width(auto);
}
@mixin w-full {
    @include width(100%);
}
@mixin h-auto {
    @include height(auto);
}
@mixin h-full {
    @include height(100%);
}
@mixin w-max {
    @include width(max-content);
}
@mixin h-max {
    @include height(max-content);
}
@mixin w-min {
    @include width(min-content);
}
@mixin h-min {
    @include height(min-content);
}
@mixin w-fit {
    @include width(fit-content);
}
@mixin h-fit {
    @include height(fit-content);
}
@mixin min-w-full {
    @include min-width(100%);
}
@mixin max-w-full {
    @include max-width(100%);
}
@mixin min-h-full {
    @include min-height(100%);
}
@mixin max-h-full {
    @include max-height(100%);
}

@mixin w-screen {
    width: 100vw;
}
@mixin h-screen {
    height: 100dvh;
}

@if fn-flags.feature-enabled("sizing") {
    #{config-flags.$parent-selector} .w-screen {
        @include w-screen;
    }

    #{config-flags.$parent-selector} .h-screen {
        @include h-screen;
    }

    #{config-flags.$parent-selector} .w-auto {
        @include w-auto;
    }

    #{config-flags.$parent-selector} .w-full {
        @include w-full;
    }

    #{config-flags.$parent-selector} .h-auto {
        @include h-auto;
    }

    #{config-flags.$parent-selector} .h-full {
        @include h-full;
    }

    #{config-flags.$parent-selector} .w-min {
        @include w-min;
    }

    #{config-flags.$parent-selector} .h-min {
        @include h-min;
    }

    #{config-flags.$parent-selector} .w-fit {
        @include w-fit;
    }

    #{config-flags.$parent-selector} .h-fit {
        @include h-fit;
    }

    #{config-flags.$parent-selector} .min-w-full {
        @include min-w-full;
    }

    #{config-flags.$parent-selector} .max-w-full {
        @include max-w-full;
    }

    #{config-flags.$parent-selector} .min-h-full {
        @include min-h-full;
    }

    #{config-flags.$parent-selector} .max-h-full {
        @include max-h-full;
    }

    // Percentage widths
    @each $i in config-spacing.$percentages {
        #{config-flags.$parent-selector} .w-#{$i}p {
            @include width-percent($i);
        }
        #{config-flags.$parent-selector} .h-#{$i}p {
            @include height-percent($i);
        }
        #{config-flags.$parent-selector} .min-w-#{$i}p {
            @include min-width-percent($i);
        }
        #{config-flags.$parent-selector} .min-h-#{$i}p {
            @include min-height-percent($i);
        }
        #{config-flags.$parent-selector} .max-w-#{$i}p {
            @include max-width-percent($i);
        }
        #{config-flags.$parent-selector} .max-h-#{$i}p {
            @include max-height-percent($i);
        }
    }

    // Generate utilities from spacing map
    @each $key, $value in config-spacing.$spacings {
        #{config-flags.$parent-selector} .w-#{$key},
        #{config-flags.$parent-selector} .hover\:w-#{$key}:hover,
        #{config-flags.$parent-selector} .group:hover .group-hover\:w-#{$key} {
            @include width($value);
        }
        #{config-flags.$parent-selector} .h-#{$key},
        #{config-flags.$parent-selector} .hover\:h-#{$key}:hover,
        #{config-flags.$parent-selector} .group:hover .group-hover\:h-#{$key} {
            @include height($value);
        }

        #{config-flags.$parent-selector} .min-w-#{$key} {
            @include min-width($value);
        }
        #{config-flags.$parent-selector} .min-h-#{$key} {
            @include min-height($value);
        }
        #{config-flags.$parent-selector} .max-w-#{$key} {
            @include max-width($value);
        }
        #{config-flags.$parent-selector} .max-h-#{$key} {
            @include max-height($value);
        }
    }

    // Pixel widths based on spacing scale
    @each $breakpoint, $width in config-breakpoint.$breakpoints {
        #{config-flags.$parent-selector} .w-#{$breakpoint} {
            @include width($width);
        }
        #{config-flags.$parent-selector} .min-w-#{$breakpoint} {
            @include min-width($width);
        }
        #{config-flags.$parent-selector} .max-w-#{$breakpoint} {
            @include max-width($width);
        }

        #{config-flags.$parent-selector} .w-auto\@#{$breakpoint} {
            @include w-auto;
        }
        #{config-flags.$parent-selector} .w-full\@#{$breakpoint} {
            @include w-full;
        }
        #{config-flags.$parent-selector} .h-auto\@#{$breakpoint} {
            @include h-auto;
        }
        #{config-flags.$parent-selector} .h-full\@#{$breakpoint} {
            @include h-full;
        }
        #{config-flags.$parent-selector} .w-min\@#{$breakpoint} {
            @include w-min;
        }
        #{config-flags.$parent-selector} .h-min\@#{$breakpoint} {
            @include h-min;
        }
        #{config-flags.$parent-selector} .w-fit\@#{$breakpoint} {
            @include w-fit;
        }
        #{config-flags.$parent-selector} .h-fit\@#{$breakpoint} {
            @include h-fit;
        }

        @include MQ.media-up($breakpoint) {
            // Generate utilities from spacing map
            @each $i in config-spacing.$percentages {
                #{config-flags.$parent-selector} .w-#{$i}p\@#{$breakpoint},
                #{config-flags.$parent-selector} .hover\:w-#{$i}p\@#{$breakpoint}:hover,
                #{config-flags.$parent-selector} .group:hover .group-hover\:w-#{$i}p\@#{$breakpoint} {
                    @include width-percent($i);
                }
                #{config-flags.$parent-selector} .h-#{$i}p\@#{$breakpoint},
                #{config-flags.$parent-selector} .hover\:h-#{$i}p\@#{$breakpoint}:hover,
                #{config-flags.$parent-selector} .group:hover .group-hover\:h-#{$i}p\@#{$breakpoint} {
                    @include height-percent($i);
                }

                #{config-flags.$parent-selector} .min-w-#{$i}p\@#{$breakpoint} {
                    @include min-width-percent($i);
                }
                #{config-flags.$parent-selector} .min-h-#{$i}p\@#{$breakpoint} {
                    @include min-height-percent($i);
                }
                #{config-flags.$parent-selector} .max-w-#{$i}p\@#{$breakpoint} {
                    @include max-width-percent($i);
                }
                #{config-flags.$parent-selector} .max-h-#{$i}p\@#{$breakpoint} {
                    @include max-height-percent($i);
                }
            }

            @each $key, $value in config-spacing.$spacings {
                #{config-flags.$parent-selector} .w-#{$key}\@#{$breakpoint},
                #{config-flags.$parent-selector} .hover\:w-#{$key}\@#{$breakpoint}:hover,
                #{config-flags.$parent-selector} .group:hover .group-hover\:w-#{$key}\@#{$breakpoint} {
                    @include width($value);
                }
                #{config-flags.$parent-selector} .h-#{$key}\@#{$breakpoint},
                #{config-flags.$parent-selector} .hover\:h-#{$key}\@#{$breakpoint}:hover,
                #{config-flags.$parent-selector} .group:hover .group-hover\:h-#{$key}\@#{$breakpoint} {
                    @include height($value);
                }

                #{config-flags.$parent-selector} .min-w-#{$key}\@#{$breakpoint} {
                    @include min-width($value);
                }
                #{config-flags.$parent-selector} .min-h-#{$key}\@#{$breakpoint} {
                    @include min-height($value);
                }
                #{config-flags.$parent-selector} .max-w-#{$key}\@#{$breakpoint} {
                    @include max-width($value);
                }
                #{config-flags.$parent-selector} .max-h-#{$key}\@#{$breakpoint} {
                    @include max-height($value);
                }
            }
        }
    }
}