@import "../functions";
@import "../variables";
@import "../variables-dark";
@import "../maps";
@import "../mixins";
@import "../utilities";
@import "variables";

$all-colors: map-merge-multiple($theme-colors, $blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans, $grays);

$utilities: map-merge(
        $utilities,
        (
            "color": map-merge(
                    map-get($utilities, "color"),
                    (
                        values: map-merge(
                                map-get(map-get($utilities, "color"), "values"),
                                    (
                                        $all-colors
                                    ),
                        ),
                    ),
            ),
            "background-color": (
                property: background-color,
                class: bg,
                local-vars: (
                    "bg-opacity": 1
                ),
                values: map-merge(
                        $utilities-bg-colors,
                            (
                                $all-colors
                            )
                )
            ),
            "font-size": (
                rfs: true,
                property: font-size,
                class: fs,
                responsive: true,
                values: $sizes-custom,
            ),
            "cursor": (
                property: cursor,
                class: cursor,
                values: (
                    auto: auto,
                    default: default,
                    pointer: pointer,
                    wait: wait,
                    text: text,
                    move: move,
                    help: help,
                    not-allowed: not-allowed,
                ),
            ),
            "pointer-events": (
                property: pointer-events,
                class: pointer-events,
                values: (
                    auto: auto,
                    none: none,
                ),
            ),
            "h": (
                property: height,
                class: h,
                responsive: true,
                values: map-merge-multiple($sizing-values, $sizing-values-2, $sizing-values-percent, ("screen": 100vh)),
            ),
            "w": (
                property: width,
                class: w,
                responsive: true,
                values: map-merge-multiple($sizing-values, $sizing-values-2, $sizing-values-percent, ("screen": 100vw)),
            ),
            "min-h": (
                property: min-height,
                class: min-h,
                responsive: true,
                values: map-merge-multiple($sizing-values-2, $sizing-values-percent, ("screen": 100vh)),
            ),
            "max-h": (
                property: max-height,
                class: max-h,
                responsive: true,
                values: map-merge-multiple($sizing-values-2, $sizing-values-percent, ("screen": 100vh)),
            ),
            "min-w": (
                property: min-width,
                class: min-w,
                responsive: true,
                values: map-merge-multiple($sizing-values-2, $sizing-values-percent, ("screen": 100vw)),
            ),
            "max-w": (
                property: max-width,
                class: max-w,
                responsive: true,
                values: map-merge-multiple($sizing-values-2, $sizing-values-percent, ("screen": 100vw)),
            ),
            // ------- Margin ------- //
            "m":
            (
                property: margin,
                class: m,
                responsive: true,
                values: $sizing-values,
            ),
            "mt": (
                property: margin-top,
                class: mt,
                responsive: true,
                values: $sizing-values,
            ),
            "mb": (
                property: margin-bottom,
                class: mb,
                responsive: true,
                values: $sizing-values,
            ),
            "ms": (
                property: margin-left,
                class: ms,
                responsive: true,
                values: $sizing-values,
            ),
            "me": (
                property: margin-right,
                class: me,
                responsive: true,
                values: $sizing-values,
            ),
            "mx": (
                property: margin-left margin-right,
                class: mx,
                responsive: true,
                values: $sizing-values,
            ),
            "my": (
                property: margin-top margin-bottom,
                class: my,
                responsive: true,
                values: $sizing-values,
            ),
            // ------- Padding ------- //
            "p":
            (
                property: padding,
                class: p,
                responsive: true,
                values: $sizing-values,
            ),
            "pt": (
                property: padding-top,
                class: pt,
                responsive: true,
                values: $sizing-values,
            ),
            "pb": (
                property: padding-bottom,
                class: pb,
                responsive: true,
                values: $sizing-values,
            ),
            "ps": (
                property: padding-left,
                class: ps,
                responsive: true,
                values: $sizing-values,
            ),
            "pe": (
                property: padding-right,
                class: pe,
                responsive: true,
                values: $sizing-values,
            ),
            "px": (
                property: padding-left padding-right,
                class: px,
                responsive: true,
                values: $sizing-values,
            ),
            "py": (
                property: padding-top padding-bottom,
                class: py,
                responsive: true,
                values: $sizing-values,
            ),
            // ------- gutter ------- //
            "g":
            (
                property: --bs-gutter-y --bs-gutter-x,
                class: g,
                responsive: true,
                values: $sizing-values,
            ),
            "gx": (
                property: --bs-gutter-x,
                class: gx,
                responsive: true,
                values: $sizing-values,
            ),
            "gy": (
                property: --bs-gutter-y,
                class: gy,
                responsive: true,
                values: $sizing-values,
            ),
            "gap": (
                property: gap,
                class: gap,
                responsive: true,
                values: $sizing-values,
            ),
            "row-gap": (
                property: row-gap,
                class: row-gap,
                responsive: true,
                values: $sizing-values,
            ),
            "column-gap": (
                property: column-gap,
                class: column-gap,
                responsive: true,
                values: $sizing-values,
            ),
        ),
);

@import "../utilities/api";