// Utilities

$utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-merge(
    (
        // scss-docs-start utils-vertical-align
        "align": (
                property: vertical-align,
                class: align,
                values: baseline top middle bottom text-bottom text-top,
            ),
        // scss-docs-end utils-vertical-align
        // scss-docs-start utils-float
        "float": (
                responsive: true,
                property: float,
                values: (
                    start: left,
                    end: right,
                    none: none,
                ),
            ),
        // scss-docs-end utils-float
        // Object Fit utilities
        // scss-docs-start utils-object-fit
        "object-fit": (
                responsive: true,
                property: object-fit,
                values: (
                    contain: contain,
                    cover: cover,
                    fill: fill,
                    scale: scale-down,
                    none: none,
                ),
            ),
        // scss-docs-end utils-object-fit
        // Opacity utilities
        // scss-docs-start utils-opacity
        "opacity": (
                property: opacity,
                values: (
                    0: 0,
                    25: 0.25,
                    50: 0.5,
                    75: 0.75,
                    100: 1,
                ),
            ),
        // scss-docs-end utils-opacity
        // scss-docs-start utils-overflow
        "overflow": (
                property: overflow,
                values: auto hidden visible scroll,
            ),
        "overflow-x": (
            property: overflow-x,
            values: auto hidden visible scroll,
        ),
        "overflow-y": (
            property: overflow-y,
            values: auto hidden visible scroll,
        ),
        // scss-docs-end utils-overflow
        // scss-docs-start utils-display
        "display": (
                responsive: true,
                print: true,
                property: display,
                class: d,
                values: inline inline-block block grid inline-grid table table-row table-cell flex
                    inline-flex none,
            ),
        // scss-docs-end utils-display
        // scss-docs-start utils-shadow
        "shadow": (
                property: box-shadow,
                class: shadow,
                values: (
                    null: var(--#{$prefix}box-shadow),
                    sm: var(--#{$prefix}box-shadow-sm),
                    lg: var(--#{$prefix}box-shadow-lg),
                    none: none,
                ),
            ),
        // scss-docs-end utils-shadow
        // scss-docs-start utils-focus-ring
        "focus-ring": (
                css-var: true,
                css-variable-name: focus-ring-color,
                class: focus-ring,
                values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring"),
            ),
        // scss-docs-end utils-focus-ring
        // scss-docs-start utils-position
        "position": (
                property: position,
                values: static relative absolute fixed sticky,
            ),
        "top": (
            property: top,
            values: $position-values,
        ),
        "bottom": (
            property: bottom,
            values: $position-values,
        ),
        "start": (
            property: left,
            class: start,
            values: $position-values,
        ),
        "end": (
            property: right,
            class: end,
            values: $position-values,
        ),
        "translate-middle": (
            property: transform,
            class: translate-middle,
            values: (
                null: translate(-50%, -50%),
                x: translateX(-50%),
                y: translateY(-50%),
            ),
        ),
        // scss-docs-end utils-position
        // scss-docs-start utils-borders
        "border": (
                property: border,
                values: (
                    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
                        var(--#{$prefix}border-color),
                    0: 0,
                ),
            ),
        "border-top": (
            property: border-top,
            values: (
                null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
                    var(--#{$prefix}border-color),
                0: 0,
            ),
        ),
        "border-end": (
            property: border-right,
            class: border-end,
            values: (
                null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
                    var(--#{$prefix}border-color),
                0: 0,
            ),
        ),
        "border-bottom": (
            property: border-bottom,
            values: (
                null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
                    var(--#{$prefix}border-color),
                0: 0,
            ),
        ),
        "border-start": (
            property: border-left,
            class: border-start,
            values: (
                null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
                    var(--#{$prefix}border-color),
                0: 0,
            ),
        ),
        "border-color": (
            property: border-color,
            class: border,
            local-vars: (
                "border-opacity": 1,
            ),
            values: $utilities-border-colors,
        ),
        "subtle-border-color": (
            property: border-color,
            class: border,
            values: $utilities-border-subtle,
        ),
        "border-width": (
            property: border-width,
            class: border,
            values: $border-widths,
        ),
        "border-opacity": (
            css-var: true,
            class: border-opacity,
            values: (
                10: 0.1,
                25: 0.25,
                50: 0.5,
                75: 0.75,
                100: 1,
            ),
        ),
        // scss-docs-end utils-borders
        // Sizing utilities
        // scss-docs-start utils-sizing
        "width": (
                property: width,
                class: w,
                values: (
                    25: 25%,
                    50: 50%,
                    75: 75%,
                    100: 100%,
                    auto: auto,
                ),
            ),
        "max-width": (
            property: max-width,
            class: mw,
            values: (
                100: 100%,
            ),
        ),
        "viewport-width": (
            property: width,
            class: vw,
            values: (
                100: 100vw,
            ),
        ),
        "min-viewport-width": (
            property: min-width,
            class: min-vw,
            values: (
                100: 100vw,
            ),
        ),
        "height": (
            property: height,
            class: h,
            values: (
                25: 25%,
                50: 50%,
                75: 75%,
                100: 100%,
                auto: auto,
            ),
        ),
        "max-height": (
            property: max-height,
            class: mh,
            values: (
                100: 100%,
            ),
        ),
        "viewport-height": (
            property: height,
            class: vh,
            values: (
                100: 100vh,
            ),
        ),
        "min-viewport-height": (
            property: min-height,
            class: min-vh,
            values: (
                100: 100vh,
            ),
        ),
        // scss-docs-end utils-sizing
        // Flex utilities
        // scss-docs-start utils-flex
        "flex": (
                responsive: true,
                property: flex,
                values: (
                    fill: 1 1 auto,
                ),
            ),
        "flex-direction": (
            responsive: true,
            property: flex-direction,
            class: flex,
            values: row column row-reverse column-reverse,
        ),
        "flex-grow": (
            responsive: true,
            property: flex-grow,
            class: flex,
            values: (
                grow-0: 0,
                grow-1: 1,
            ),
        ),
        "flex-shrink": (
            responsive: true,
            property: flex-shrink,
            class: flex,
            values: (
                shrink-0: 0,
                shrink-1: 1,
            ),
        ),
        "flex-wrap": (
            responsive: true,
            property: flex-wrap,
            class: flex,
            values: wrap nowrap wrap-reverse,
        ),
        "justify-content": (
            responsive: true,
            property: justify-content,
            values: (
                start: flex-start,
                end: flex-end,
                center: center,
                between: space-between,
                around: space-around,
                evenly: space-evenly,
            ),
        ),
        "align-items": (
            responsive: true,
            property: align-items,
            values: (
                start: flex-start,
                end: flex-end,
                center: center,
                baseline: baseline,
                stretch: stretch,
            ),
        ),
        "align-content": (
            responsive: true,
            property: align-content,
            values: (
                start: flex-start,
                end: flex-end,
                center: center,
                between: space-between,
                around: space-around,
                stretch: stretch,
            ),
        ),
        "align-self": (
            responsive: true,
            property: align-self,
            values: (
                auto: auto,
                start: flex-start,
                end: flex-end,
                center: center,
                baseline: baseline,
                stretch: stretch,
            ),
        ),
        "order": (
            responsive: true,
            property: order,
            values: (
                first: -1,
                0: 0,
                1: 1,
                2: 2,
                3: 3,
                4: 4,
                5: 5,
                last: 6,
            ),
        ),
        // scss-docs-end utils-flex
        // Margin utilities
        // scss-docs-start utils-spacing
        "margin": (
                responsive: true,
                property: margin,
                class: m,
                values: map-merge(
                        $spacers,
                        (
                            auto: auto,
                        )
                    ),
            ),
        "margin-x": (
            responsive: true,
            property: margin-right margin-left,
            class: mx,
            values: map-merge(
                    $spacers,
                    (
                        auto: auto,
                    )
                ),
        ),
        "margin-y": (
            responsive: true,
            property: margin-top margin-bottom,
            class: my,
            values: map-merge(
                    $spacers,
                    (
                        auto: auto,
                    )
                ),
        ),
        "margin-top": (
            responsive: true,
            property: margin-top,
            class: mt,
            values: map-merge(
                    $spacers,
                    (
                        auto: auto,
                    )
                ),
        ),
        "margin-end": (
            responsive: true,
            property: margin-right,
            class: me,
            values: map-merge(
                    $spacers,
                    (
                        auto: auto,
                    )
                ),
        ),
        "margin-bottom": (
            responsive: true,
            property: margin-bottom,
            class: mb,
            values: map-merge(
                    $spacers,
                    (
                        auto: auto,
                    )
                ),
        ),
        "margin-start": (
            responsive: true,
            property: margin-left,
            class: ms,
            values: map-merge(
                    $spacers,
                    (
                        auto: auto,
                    )
                ),
        ),
        // Negative margin utilities
        "negative-margin": (
                responsive: true,
                property: margin,
                class: m,
                values: $negative-spacers,
            ),
        "negative-margin-x": (
            responsive: true,
            property: margin-right margin-left,
            class: mx,
            values: $negative-spacers,
        ),
        "negative-margin-y": (
            responsive: true,
            property: margin-top margin-bottom,
            class: my,
            values: $negative-spacers,
        ),
        "negative-margin-top": (
            responsive: true,
            property: margin-top,
            class: mt,
            values: $negative-spacers,
        ),
        "negative-margin-end": (
            responsive: true,
            property: margin-right,
            class: me,
            values: $negative-spacers,
        ),
        "negative-margin-bottom": (
            responsive: true,
            property: margin-bottom,
            class: mb,
            values: $negative-spacers,
        ),
        "negative-margin-start": (
            responsive: true,
            property: margin-left,
            class: ms,
            values: $negative-spacers,
        ),
        // Padding utilities
        "padding": (
                responsive: true,
                property: padding,
                class: p,
                values: $spacers,
            ),
        "padding-x": (
            responsive: true,
            property: padding-right padding-left,
            class: px,
            values: $spacers,
        ),
        "padding-y": (
            responsive: true,
            property: padding-top padding-bottom,
            class: py,
            values: $spacers,
        ),
        "padding-top": (
            responsive: true,
            property: padding-top,
            class: pt,
            values: $spacers,
        ),
        "padding-end": (
            responsive: true,
            property: padding-right,
            class: pe,
            values: $spacers,
        ),
        "padding-bottom": (
            responsive: true,
            property: padding-bottom,
            class: pb,
            values: $spacers,
        ),
        "padding-start": (
            responsive: true,
            property: padding-left,
            class: ps,
            values: $spacers,
        ),
        // Gap utility
        "gap": (
                responsive: true,
                property: gap,
                class: gap,
                values: $spacers,
            ),
        "row-gap": (
            responsive: true,
            property: row-gap,
            class: row-gap,
            values: $spacers,
        ),
        "column-gap": (
            responsive: true,
            property: column-gap,
            class: column-gap,
            values: $spacers,
        ),
        // scss-docs-end utils-spacing
        // Text
        // scss-docs-start utils-text
        "font-family": (
                property: font-family,
                class: font,
                values: (
                    monospace: var(--#{$prefix}font-monospace),
                ),
            ),
        "font-size": (
            rfs: true,
            property: font-size,
            class: fs,
            values: $font-sizes,
        ),
        "font-style": (
            property: font-style,
            class: fst,
            values: italic normal,
        ),
        "font-weight": (
            property: font-weight,
            class: fw,
            values: (
                lighter: $font-weight-lighter,
                light: $font-weight-light,
                normal: $font-weight-normal,
                medium: $font-weight-medium,
                semibold: $font-weight-semibold,
                bold: $font-weight-bold,
                bolder: $font-weight-bolder,
            ),
        ),
        "line-height": (
            property: line-height,
            class: lh,
            values: (
                1: 1,
                sm: $line-height-sm,
                base: $line-height-base,
                lg: $line-height-lg,
            ),
        ),
        "text-align": (
            responsive: true,
            property: text-align,
            class: text,
            values: (
                start: left,
                end: right,
                center: center,
            ),
        ),
        "text-decoration": (
            property: text-decoration,
            values: none underline line-through,
        ),
        "text-transform": (
            property: text-transform,
            class: text,
            values: lowercase uppercase capitalize,
        ),
        "white-space": (
            property: white-space,
            class: text,
            values: (
                wrap: normal,
                nowrap: nowrap,
            ),
        ),
        "word-wrap": (
            property: word-wrap word-break,
            class: text,
            values: (
                break: break-word,
            ),
            rtl: false,
        ),
        // scss-docs-end utils-text
        // scss-docs-start utils-color
        "color": (
                property: color,
                class: text,
                local-vars: (
                    "text-opacity": 1,
                ),
                values: map-merge(
                        $utilities-text-colors,
                        (
                            "muted": var(--#{$prefix}secondary-color),
                            // deprecated
                            "black-50": rgba($black, 0.5),
                            // deprecated
                            "white-50": rgba($white, 0.5),
                            // deprecated
                            "body-secondary": var(--#{$prefix}secondary-color),
                            "body-tertiary": var(--#{$prefix}tertiary-color),
                            "body-emphasis": var(--#{$prefix}emphasis-color),
                            "reset": inherit,
                        )
                    ),
            ),
        "text-opacity": (
            css-var: true,
            class: text-opacity,
            values: (
                25: 0.25,
                50: 0.5,
                75: 0.75,
                100: 1,
            ),
        ),
        "text-color": (
            property: color,
            class: text,
            values: $utilities-text-emphasis-colors,
        ),
        // scss-docs-end utils-color
        // scss-docs-start utils-links
        "link-opacity": (
                css-var: true,
                class: link-opacity,
                state: hover,
                values: (
                    10: 0.1,
                    25: 0.25,
                    50: 0.5,
                    75: 0.75,
                    100: 1,
                ),
            ),
        "link-offset": (
            property: text-underline-offset,
            class: link-offset,
            state: hover,
            values: (
                1: 0.125em,
                2: 0.25em,
                3: 0.375em,
            ),
        ),
        "link-underline": (
            property: text-decoration-color,
            class: link-underline,
            local-vars: (
                "link-underline-opacity": 1,
            ),
            values: map-merge(
                    $utilities-links-underline,
                    (
                        null: rgba(
                                var(--#{$prefix}link-color-rgb),
                                var(--#{$prefix}link-underline-opacity, 1)
                            ),
                    )
                ),
        ),
        "link-underline-opacity": (
            css-var: true,
            class: link-underline-opacity,
            state: hover,
            values: (
                0: 0,
                10: 0.1,
                25: 0.25,
                50: 0.5,
                75: 0.75,
                100: 1,
            ),
        ),
        // scss-docs-end utils-links
        // scss-docs-start utils-bg-color
        "background-color": (
                property: background-color,
                class: bg,
                local-vars: (
                    "bg-opacity": 1,
                ),
                values: map-merge(
                        $utilities-bg-colors,
                        (
                            "transparent": transparent,
                            "body-secondary": rgba(
                                    var(--#{$prefix}secondary-bg-rgb),
                                    var(--#{$prefix}bg-opacity)
                                ),
                            "body-tertiary": rgba(
                                    var(--#{$prefix}tertiary-bg-rgb),
                                    var(--#{$prefix}bg-opacity)
                                ),
                        )
                    ),
            ),
        "bg-opacity": (
            css-var: true,
            class: bg-opacity,
            values: (
                10: 0.1,
                25: 0.25,
                50: 0.5,
                75: 0.75,
                100: 1,
            ),
        ),
        "subtle-background-color": (
            property: background-color,
            class: bg,
            values: $utilities-bg-subtle,
        ),
        // scss-docs-end utils-bg-color
        "gradient": (
                property: background-image,
                class: bg,
                values: (
                    gradient: var(--#{$prefix}gradient),
                ),
            ),
        // scss-docs-start utils-interaction
        "user-select": (
                property: user-select,
                values: all auto none,
            ),
        "pointer-events": (
            property: pointer-events,
            class: pe,
            values: none auto,
        ),
        // scss-docs-end utils-interaction
        // scss-docs-start utils-border-radius
        "rounded": (
                property: border-radius,
                class: rounded,
                values: (
                    null: var(--#{$prefix}border-radius),
                    0: 0,
                    1: var(--#{$prefix}border-radius-sm),
                    2: var(--#{$prefix}border-radius),
                    3: var(--#{$prefix}border-radius-lg),
                    4: var(--#{$prefix}border-radius-xl),
                    5: var(--#{$prefix}border-radius-xxl),
                    circle: 50%,
                    pill: var(--#{$prefix}border-radius-pill),
                ),
            ),
        "rounded-top": (
            property: border-top-left-radius border-top-right-radius,
            class: rounded-top,
            values: (
                null: var(--#{$prefix}border-radius),
                0: 0,
                1: var(--#{$prefix}border-radius-sm),
                2: var(--#{$prefix}border-radius),
                3: var(--#{$prefix}border-radius-lg),
                4: var(--#{$prefix}border-radius-xl),
                5: var(--#{$prefix}border-radius-xxl),
                circle: 50%,
                pill: var(--#{$prefix}border-radius-pill),
            ),
        ),
        "rounded-end": (
            property: border-top-right-radius border-bottom-right-radius,
            class: rounded-end,
            values: (
                null: var(--#{$prefix}border-radius),
                0: 0,
                1: var(--#{$prefix}border-radius-sm),
                2: var(--#{$prefix}border-radius),
                3: var(--#{$prefix}border-radius-lg),
                4: var(--#{$prefix}border-radius-xl),
                5: var(--#{$prefix}border-radius-xxl),
                circle: 50%,
                pill: var(--#{$prefix}border-radius-pill),
            ),
        ),
        "rounded-bottom": (
            property: border-bottom-right-radius border-bottom-left-radius,
            class: rounded-bottom,
            values: (
                null: var(--#{$prefix}border-radius),
                0: 0,
                1: var(--#{$prefix}border-radius-sm),
                2: var(--#{$prefix}border-radius),
                3: var(--#{$prefix}border-radius-lg),
                4: var(--#{$prefix}border-radius-xl),
                5: var(--#{$prefix}border-radius-xxl),
                circle: 50%,
                pill: var(--#{$prefix}border-radius-pill),
            ),
        ),
        "rounded-start": (
            property: border-bottom-left-radius border-top-left-radius,
            class: rounded-start,
            values: (
                null: var(--#{$prefix}border-radius),
                0: 0,
                1: var(--#{$prefix}border-radius-sm),
                2: var(--#{$prefix}border-radius),
                3: var(--#{$prefix}border-radius-lg),
                4: var(--#{$prefix}border-radius-xl),
                5: var(--#{$prefix}border-radius-xxl),
                circle: 50%,
                pill: var(--#{$prefix}border-radius-pill),
            ),
        ),
        // scss-docs-end utils-border-radius
        // scss-docs-start utils-visibility
        "visibility": (
                property: visibility,
                class: null,
                values: (
                    visible: visible,
                    invisible: hidden,
                ),
            ),
        // scss-docs-end utils-visibility
        // scss-docs-start utils-zindex
        "z-index": (
                property: z-index,
                class: z,
                values: $zindex-levels,
            ) // scss-docs-end utils-zindex
    ),
    $utilities
);