// stylelint-disable indentation

// Utilities
$utilities: ();
$utilities: map-merge(
(
    "align": (
        property: vertical-align,
        class: align,
        values: baseline top middle bottom text-bottom text-top
    ),
    "float": (
        responsive: true,
        property: float,
        values: (
            start: left,
            end: right,
            none: none
        )
    ),
    "opacity": (
        property: opacity,
        values: (
            0: 0,
            25: .25,
            50: .5,
            75: .75,
            100: 1
        )
    ),
    "overflow": (
        responsive: true,
        property: overflow,
        values: auto hidden visible scroll,
    ),
    "display": (
        responsive: true,
        print: true,
        property: display,
        class: d,
        values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),
    "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
        )
    ),

    // 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%),
            start: translate(-50%, 50%),
            top: translate(50%, -50%)
        )
    ),

    //
    // Border utilities
    //

    // Border
    "border": (
        responsive: true,
        property: border,
        values: (
            null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
            0: 0
        )
    ),
    "border-top": (
        responsive: true,
        property: border-top,
        values: (
            null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
            0: 0
        )
    ),
    "border-end": (
        responsive: true,
        property: border-right,
        class: border-end,
        values: (
            null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
            0: 0
        )
    ),
    "border-bottom": (
        responsive: true,
        property: border-bottom,
        values: (
            null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
            0: 0
        )
    ),
    "border-start": (
        responsive: true,
        property: border-left,
        class: border-start,
        values: (
            null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
            0: 0
        )
    ),

    // Border color
    "border-color": (
        property: border-color,
        local-vars: (
            "border-opacity": 1
        ),
        class: border,
        values: map-merge($utilities-border-colors, (
            "transparent": transparent
        ))
    ),
    "border-top-color": (
        property: border-top-color,
        local-vars: (
            "border-opacity": 1
        ),
        class: border-top,
        values: map-merge($utilities-border-colors, (
            "transparent": transparent
        ))
    ),
    "border-bottom-color": (
        property: border-bottom-color,
        local-vars: (
            "border-opacity": 1
        ),
        class: border-bottom,
        values: map-merge($utilities-border-colors, (
            "transparent": transparent
        ))
    ),
    "border-start-color": (
        property: border-left-color,
        local-vars: (
            "border-opacity": 1
        ),
        class: border-start,
        values: map-merge($utilities-border-colors, (
            "transparent": transparent
        ))
    ),
    "border-end-color": (
        property: border-right-color,
        local-vars: (
            "border-opacity": 1
        ),
        class: border-end,
        values: map-merge($utilities-border-colors, (
            "transparent": transparent
        ))
    ),

    // Border width
    "border-width": (
        property: border-width,
        class: border-width,
        values: $border-widths
    ),
    "border-top-width": (
        property: border-top-width,
        class: border-top-width,
        values: $border-widths
    ),
    "border-bottom-width": (
        property: border-bottom-width,
        class: border-bottom-width,
        values: $border-widths
    ),
    "border-start-width": (
        property: border-left-width,
        class: border-start-width,
        values: $border-widths
    ),
    "border-end-width": (
        property: border-right-width,
        class: border-end-width,
        values: $border-widths
    ),

    // Border styles
    "border-opacity": (
        css-var: true,
        class: border-opacity,
        values: (
            10: .1,
            15: .15,
            20: .2,
            25: .25,
            50: .5,
            75: .75,
            100: 1
        )
    ),
    "border-style": (
        property: border-style,
        class: border-style,
        values: (
            'dashed': 'dashed',
            'dotted': 'dotted'
        )
    ),
    "border-top-style": (
        property: border-top-style,
        class: border-top-style,
        values: (
            'dashed': 'dashed',
            'dotted': 'dotted'
        )
    ),
    "border-bottom-style": (
        property: border-bottom-style,
        class: border-bottom-style,
        values: (
            'dashed': 'dashed',
            'dotted': 'dotted'
        )
    ),


    //
    // Sizing utilities
    //

    // Width
    "width": (
        property: width,
        class: w,
        values: (
            16px: 1rem,
            24px: 1.5rem,
            32px: 2rem,
            40px: 2.5rem,
            48px: 3rem,
            56px: 3.5rem,
            64px: 4rem,
            72px: 4.5rem,
            80px: 5rem
        )
    ),
    "width-responsive": (
        property: width,
        responsive: true,
        class: w,
        values: (
            25: 25%,
            50: 50%,
            75: 75%,
            100: 100%,
            auto: auto
        )
    ),
    "min-width": (
        property: min-width,
        responsive: true,
        class: wmin,
        values: (
            0: 0,
            200: 200px,
            250: 250px,
            300: 300px,
            350: 350px,
            400: 400px,
            450: 450px,
            500: 500px,
            550: 550px,
            600: 600px
        )
    ),
    "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
    "height": (
        property: height,
        class: h,
        values: (
            16px: 1rem,
            24px: 1.5rem,
            32px: 2rem,
            40px: 2.5rem,
            48px: 3rem,
            56px: 3.5rem,
            64px: 4rem,
            72px: 4.5rem,
            80px: 5rem
        )
    ),
    "height-responsive": (
        property: height,
        responsive: true,
        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
        )
    ),


    //
    // Flex utilities
    //

    "flex": (
        responsive: true,
        property: flex,
        values: (
            0: 0 1 auto,
            1: 1,
            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,
            grow-2: 2,
            grow-3: 3
        )
    ),
    "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
        ),
    ),


    //
    // Margin utilities
    //

    "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
    ),


    //
    // Typography
    //

    "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: (
            light: $font-weight-light,
            lighter: $font-weight-lighter,
            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,
            xs: var(--#{$prefix}body-line-height-xs),
            sm: var(--#{$prefix}body-line-height-sm),
            base: var(--#{$prefix}body-line-height),
            lg: var(--#{$prefix}body-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
    ),


    //
    // Colors
    //

    // Text
    "color": (
        property: color,
        class: text,
        local-vars: (
            "text-opacity": 1
        ),
        values: map-merge(
            $utilities-text-colors,
            (
                "white": rgba(var(--#{$prefix}white-rgb), var(--text-opacity)),
                "muted": rgba(var(--#{$prefix}body-color-rgb), .75),
                "reset": inherit
            )
        )
    ),
    "text-opacity": (
        css-var: true,
        class: text-opacity,
        values: (
            25: .25,
            50: .5,
            75: .75,
            100: 1
        )
    ),

    // Background
    "background-color": (
        property: background-color,
        class: bg,
        local-vars: (
            "bg-opacity": 1
        ),
        values: map-merge(
            $utilities-bg-colors,
            (
                "transparent": transparent,
                "card": $card-bg
            )
        )
    ),
    "bg-opacity": (
        css-var: true,
        class: bg-opacity,
        values: (
            10: .1,
            20: .2,
            25: .25,
            50: .5,
            75: .75,
            100: 1
        )
    ),

    // Gradient
    "gradient": (
        property: background-image,
        class: bg,
        values: (gradient: var(--#{$prefix}gradient))
    ),


    //
    // Interactions
    //

    "user-select": (
        property: user-select,
        values: all auto none
    ),
    "pointer-events": (
        property: pointer-events,
        class: pe,
        values: none auto
    ),


    //
    // Border radius
    //

    "rounded": (
        responsive: true,
        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-2xl),
            circle: 50%,
            pill: var(--#{$prefix}border-radius-pill)
        )
    ),
    "rounded-top": (
        responsive: true,
        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),
            pill: var(--#{$prefix}border-radius-pill)
        )
    ),
    "rounded-end": (
        responsive: true,
        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),
            pill: var(--#{$prefix}border-radius-pill)
        )
    ),
    "rounded-bottom": (
        responsive: true,
        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),
            pill: var(--#{$prefix}border-radius-pill)
        )
    ),
    "rounded-start": (
        responsive: true,
        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),
            pill: var(--#{$prefix}border-radius-pill)
        )
    ),
    "rounded-top-start": (
        property: border-top-left-radius,
        class: rounded-top-start,
        values: (
            null: $border-radius,
            0: 0
        )
    ),
    "rounded-top-end": (
        property: border-top-right-radius,
        class: rounded-top-end,
        values: (
            null: $border-radius,
            0: 0
        )
    ),
    "rounded-bottom-start": (
        property: border-bottom-left-radius,
        class: rounded-bottom-start,
        values: (
            null: $border-radius,
            0: 0
        )
    ),
    "rounded-bottom-end": (
        property: border-bottom-right-radius,
        class: rounded-bottom-end,
        values: (
            null: $border-radius,
            0: 0
        )
    ),


    //
    // Misc
    //

    "filter": (
        property: filter,
        class: filter,
        values: none
    ),

    "visibility": (
        property: visibility,
        class: null,
        values: (
            visible: visible,
            invisible: hidden
        )
    ),

    "cursor": (
        property: cursor,
        class: cursor,
        values: (
            pointer: pointer,
            move: move,
            default: default
        )
    ),

    "rotate-cw": (
        property: transform,
        class: rotate-cw,
        values: (
            45: rotate(45deg),
            90: rotate(90deg),
            180: rotate(180deg)
        )
    ),
    "rotate-ccw": (
        property: transform,
        class: rotate-ccw,
        values: (
            45: rotate(-45deg),
            90: rotate(-90deg),
            180: rotate(-180deg)
        )
    ),

    "transition": (
        property: transition,
        class: transition,
        values: (
            none: none
        )
    ),

    "z-index": (
        property: z-index,
        class: zindex,
        values: (
            auto: auto,
            1: 1
        )
    )
),
$utilities
);