@use "sass:list";

// =========================================
// --> Bring only the require for a layout
$sparkUtil: (
    "border-style": (
        property: border-style,
        class: "-",
        values: (
            dashed: dashed,
            dotted: dotted,
            none: none,
            solid: solid,
        ),
    ),
);

$sparkOptionalUtils: (
    margin:
        mapMerge(
            map-get-multiple($utilities, ("margin", "margin-bottom", "margin-top", "margin-x", "margin-y")),
            (
                "margin-right": (
                    responsive: true,
                    property: margin-right,
                    class: mr,
                    values:
                        map-merge(
                            $spacers,
                            (
                                auto: auto,
                            )
                        ),
                ),
                "margin-left": (
                    responsive: true,
                    property: margin-left,
                    class: ml,
                    values:
                        map-merge(
                            $spacers,
                            (
                                auto: auto,
                            )
                        ),
                ),
            )
        ),
    padding:
        mapMerge(
            map-get-multiple($utilities, ("padding", "padding-bottom", "padding-top", "padding-x", "padding-y")),
            (
                "padding-right": (
                    responsive: true,
                    property: padding-right,
                    class: pr,
                    values: $spacers,
                ),
                "padding-left": (
                    responsive: true,
                    property: padding-left,
                    class: pl,
                    values: $spacers,
                ),
            )
        ),
    width: (
        "width-percent": (
            responsive: true,
            property: width,
            class: w,
            values: $percentSizes,
        ),
    ),
    height: (
        "height-percent": (
            responsive: true,
            property: height,
            class: h,
            values:
                map-merge(
                    $percentSizes,
                    (
                        vh: 100vh,
                    )
                ),
        ),
    ),
    z-index: (
        "z-index": (
            property: z-index,
            class: z,
            values: $zIndex,
        ),
    ),
    flex:
        map-get-multiple(
            $utilities,
            (
                "align-content",
                "align-items",
                "align-self",
                "flex",
                "flex-direction",
                "flex-grow",
                "flex-shrink",
                "flex-wrap",
                "justify-content",
                "order"
            )
        ),
    float: (
        "float": (
            responsive: true,
            property: float,
            values: (
                left: left,
                right: right,
                none: none,
            ),
        ),
    ),
    position: map-get-multiple($utilities, ("position")),
    display: map-get-multiple($utilities, ("display")),
    visibility: map-get-multiple($utilities, ("visibility")),
);

// -----------------------------------------
// Remap to correct or override the utilities
@each $key, $value in $miniUtilsMapping {
    @if $value {
        $sparkUtil: map-merge($sparkUtil, map-get($sparkOptionalUtils, $key));
    }
}

// -----------------------------------------
// Start building the classes
$targetBreakpoints: map-get-multiple($sparkBreakpoints, $screenSizes);
$responsiveClasses: ();

// produce the standard utility classes
@each $key, $value in $sparkUtil {
    @include generate-utility($value);

    @if (type-of($value) == "map") {
        @if (map-get($value, responsive)) {
            $responsiveClasses: append($responsiveClasses, $value);
        }
    }
}

// produce the responsive utility classes
@if length($responsiveClasses) > 0 {
    @each $breakpoint in map-keys($targetBreakpoints) {
        $suffix: -#{$breakpoint};
        @include breakpoint($breakpoint) {
            @each $value in $responsiveClasses {
                @include generate-utility($value, $suffix);
            }
        }
    }
}