/* stylelint-disable scss/dollar-variable-default */
// Theme utilities

$utilities: map-merge(
  $utilities,
  (
    "opacity": map-merge(
      map-get($utilities, "opacity"),
      (
        values: map-merge(
          map-get(map-get($utilities, "opacity"), "values"),
          (
            40: .4,
          )
        )
      )
    ),
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          map-loop(map-merge-multiple($theme-colors-palettes, $palette-grays), rgba-css-var, "$key", "text"),
        )
      )
    ),
    "background-color": map-merge(
      map-get($utilities, "background-color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "background-color"), "values"),
          map-loop(
            map-merge-multiple($theme-colors-palettes, $palette-grays),
            rgba-css-var,
            "$key",
            "bg"
          )
        )
      )
    ),
    "shadow": map-merge(
      map-get($utilities, "shadow"),
      (
        values: (
          null: var(--#{$prefix}box-shadow),
          sm: var(--#{$prefix}box-shadow-sm),
          lg: var(--#{$prefix}box-shadow-lg),
          none: none
        )
      )
    ),
    "text-opacity": map-merge(
      map-get($utilities, "text-opacity"),
      (
        values: map-merge(
          map-get(map-get($utilities, "text-opacity"), "values"),
          (
            40: .4
          )
        )
      )
    ),
    "font-weight": map-merge(
      map-get($utilities, "font-weight"),
      (
        responsive: true
      )
    ),
    "position": map-merge(
      map-get($utilities, "position"),
      (
        responsive: true
      )
    ),
    "border-color": map-merge(
      map-get($utilities, "border-color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "border-color"), "values"),
          map-loop($palette-grays, rgba-css-var, "$key", "border"),
        )
      )
    ),
    "grid-column": (
      class: "g-col",
      property: grid-column,
      responsive: true,
      values: (
        13: auto/span 13,
        14: auto/span 14,
        15: auto/span 15,
        16: auto/span 16,
        17: auto/span 17,
        18: auto/span 18,
        19: auto/span 19,
        20: auto/span 20,
        21: auto/span 21,
        22: auto/span 22,
        23: auto/span 23,
        24: auto/span 24
      )
    ),
    "overlay": (
      property: opacity,
      class: "overlay",
      css-var: true,
      values: (
        0: 0,
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),
    "text-truncate": (
      responsive: true,
      class: "text-truncate",
      css-var: true,
      values: (
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 6,
        6: 6
      )
    ),
    "cursor": (
      property: cursor,
      values: $cursors
    ),
    "font-size": map-merge(
      map-get($utilities, "font-size"),
      (
        responsive: true,
        rfs: false,
        values: map-merge(
          map-get(map-get($utilities, "font-size"), "values"),
          (
            body: var(--#{$prefix}body-font-size)
          )
        )
      )
    ),
    "display-font-size": (
      class: "display",
      responsive: true,
      css-var: true,
      css-variable-name: display-font-size,
      values: $display-font-sizes
    ),
    "height": map-merge(
      map-get($utilities, "height"),
      (
        responsive: true,
      )
    ),
    "width": map-merge(
      map-get($utilities, "width"),
      (
        responsive: true,
      )
    ),
    "v-align": (
      property: vertical-align,
      responsive: true,
      class: "v-align",
      values: (
        baseline: baseline,
        top: top,
        bottom: bottom,
        text-top: text-top,
        text-bottom: text-bottom,
        sub: sub,
        super: super,
        middle: middle,
      )
    ),
    "display": (
      property: display,
      responsive: true,
      class: "d",
      values: (
        inline: inline,
        inline-block: inline-block,
        block: block,
        table: table,
        table-row: table-row,
        table-cell: table-cell,
        flex: flex,
        inline-flex: inline-flex,
        none: none,
        grid: grid,
        table-header-group: table-header-group,
      )
    ),
    "text-wrap": (
      property: text-wrap,
      responsive: true,
      class: "text-wrap",
      values: (
        balance: balance,
        normal: normal,
        truncate: truncate,
        wrap: wrap
      )
    ),
    "line-height": (
      property: line-height,
      class: lh,
      values: (
        1: 1,
        sm: var(--#{$prefix}lh-sm),
        base: var(--#{$prefix}lh-base),
        lg: var(--#{$prefix}lh-lg),
      )
    ),
  )
);