@use './variables' as variables;
@use './functions' as functions;
@use 'sass:map';
// --- Utilities --- //
//
// The utilities are only defined here, this file does not generate any classes.
// See "utilities/utilities" for class generation.

$utilities: () !default;

$utilities: map.merge(
  (
    'align': (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-bottom text-top,
    ),
    'background-color': (
      property: background-color,
      class: bg,
      values:
        map.merge(
          functions.varify-map(map.merge(variables.$colors, variables.$grays)),
          (
            'transparent': transparent,
          )
        ),
    ),
    'column-count': (
      responsive: true,
      property: column-count,
      class: column,
      values: 1 2 3 4 5,
    ),
    'cursor': (
      property: cursor,
      values: pointer,
    ),
    'display': (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block table table-row table-cell flex inline-flex none
        // "none" must be last, it overrides the others,,,,,,,,,,,,,,,,
    ),
    'float': (
      responsive: true,
      property: float,
      values: right left none,
    ),
    'max-width': (
      property: max-width,
      class: mw,
      values: (
        100: 100%,
      ),
    ),
    'list': (
      property: list-style-type,
      class: list,
      values: disc circle square decimal decimal-leading-zero lower-alpha lower-roman upper-alpha none,
    ),
    'overflow': (
      property: overflow,
      values: auto hidden scroll,
    ),
    'pointer-events': (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),
    'position': (
      property: position,
      values: static relative absolute fixed sticky,
    ),
    'position-top': (
      property: top,
      values: (
        0: 0,
        5: 5px,
        10: 10px,
      ),
    ),
    'position-right': (
      property: right,
      values: (
        0: 0,
        5: 5px,
        10: 10px,
      ),
    ),
    'position-bottom': (
      property: bottom,
      values: (
        0: 0,
        5: 5px,
        10: 10px,
      ),
    ),
    'position-left': (
      property: left,
      values: (
        0: 0,
        5: 5px,
        10: 10px,
      ),
    ),
    'shadow': (
      property: box-shadow,
      class: shadow,
      values: (
        null: var(--box-shadow),
        sm: var(--box-shadow-sm),
        lg: var(--box-shadow-lg),
        none: none,
      ),
    ),
    'visibility': (
      property: visibility,
      class: null,
      values: (
        visible: visible,
        invisible: hidden,
      ),
    ),
    'width': (
      property: width,
      class: w,
      values: (
        100: 100%,
      ),
    ),
    'height': (
      property: height,
      class: h,
      values: (
        100: 100%,
      ),
    ),
    'z-index': (
      property: z-index,
      class: z,
      values: (
        1,
        2,
        3,
        4,
        5,
      ),
    ),
    'opacity': (
      property: opacity,
      class: o,
      values: (
        10: 0.1,
        20: 0.2,
        30: 0.3,
        40: 0.4,
        50: 0.5,
        60: 0.6,
        70: 0.7,
        80: 0.8,
        90: 0.9,
      ),
    ),
    'object-fit': (
      property: object-fit,
      class: fit,
      values: (
        contain: contain,
        cover: cover,
        fill: fill,
        none: none,
        scale-down: scale-down,
      ),
    ),
    // --- Borders --- //
    'border':
      (
        responsive: true,
        property: border,
        values: (
          null: var(--border-width) solid var(--border-color),
          0: 0,
          5: 5px solid var(--border-color),
          10: 10px solid var(--border-color),
        ),
      ),
    'border-top': (
      responsive: true,
      property: border-top,
      values: (
        null: var(--border-width) solid var(--border-color),
        0: 0,
        5: 5px solid var(--border-color),
        10: 10px solid var(--border-color),
      ),
    ),
    'border-right': (
      responsive: true,
      property: border-right,
      values: (
        null: var(--border-width) solid var(--border-color),
        0: 0,
        5: 5px solid var(--border-color),
        10: 10px solid var(--border-color),
      ),
    ),
    'border-bottom': (
      responsive: true,
      property: border-bottom,
      values: (
        null: var(--border-width) solid var(--border-color),
        0: 0,
        5: 5px solid var(--border-color),
        10: 10px solid var(--border-color),
      ),
    ),
    'border-left': (
      responsive: true,
      property: border-left,
      values: (
        null: var(--border-width) solid var(--border-color),
        0: 0,
        5: 5px solid var(--border-color),
        10: 10px solid var(--border-color),
      ),
    ),
    'border-color': (
      property: border-color,
      class: border,
      values: functions.varify-map(map.merge(variables.$colors, variables.$grays)),
    ),
    'border-top-color': (
      property: border-top-color,
      class: border-top,
      values: functions.varify-map(map.merge(variables.$colors, variables.$grays)),
    ),
    'border-right-color': (
      property: border-right-color,
      class: border-right,
      values: functions.varify-map(map.merge(variables.$colors, variables.$grays)),
    ),
    'border-bottom-color': (
      property: border-bottom-color,
      class: border-bottom,
      values: functions.varify-map(map.merge(variables.$colors, variables.$grays)),
    ),
    'border-left-color': (
      property: border-left-color,
      class: border-left,
      values: functions.varify-map(map.merge(variables.$colors, variables.$grays)),
    ),
    'rounded': (
      property: border-radius,
      class: rounded,
      values: (
        null: var(--border-radius),
        sm: var(--border-radius-sm),
        lg: var(--border-radius-lg),
        circle: 50%,
        0: 0,
      ),
    ),
    'rounded-top-left': (
      property: border-top-left-radius,
      class: rounded-tl,
      values: (
        null: var(--border-radius),
        sm: var(--border-radius-sm),
        lg: var(--border-radius-lg),
        circle: 50%,
        0: 0,
      ),
    ),
    'rounded-top-right': (
      property: border-top-right-radius,
      class: rounded-tr,
      values: (
        null: var(--border-radius),
        sm: var(--border-radius-sm),
        lg: var(--border-radius-lg),
        circle: 50%,
        0: 0,
      ),
    ),
    'rounded-bottom-right': (
      property: border-bottom-right-radius,
      class: rounded-br,
      values: (
        null: var(--border-radius),
        sm: var(--border-radius-sm),
        lg: var(--border-radius-lg),
        circle: 50%,
        0: 0,
      ),
    ),
    'rounded-bottom-left': (
      property: border-bottom-left-radius,
      class: rounded-bl,
      values: (
        null: var(--border-radius),
        sm: var(--border-radius-sm),
        lg: var(--border-radius-lg),
        circle: 50%,
        0: 0,
      ),
    ),
    // --- Text --- //
    'color':
      (
        property: color,
        class: text,
        values:
          map.merge(
            functions.varify-map(map.merge(variables.$colors, variables.$grays)),
            functions.varify-map(
              (
                'muted': variables.$gray-600,
              )
            )
          ),
      ),
    'font-family': (
      property: font-family,
      class: font,
      values: (
        sans-serif: var(--font-family-sans-serif),
        serif: var(--font-family-serif),
      ),
    ),
    'font-size': (
      responsive: true,
      property: font-size,
      class: font,
      values: variables.$font-sizes,
    ),
    'font-style': (
      property: font-style,
      class: font,
      values: italic normal,
    ),
    'font-weight': (
      property: font-weight,
      values: (
        light: var(--font-weight-light),
        normal: var(--font-weight-normal),
        semi-bold: var(--font-weight-semi-bold),
        bold: var(--font-weight-bold),
        extra-bold: var(--font-weight-extra-bold),
      ),
    ),
    'letter-spacing': (
      property: letter-spacing,
      class: ls,
      values: (
        normal: var(--letter-spacing-normal),
        lg: var(--letter-spacing-lg),
      ),
    ),
    'line-clamp': (
      responsive: true,
      property: line-clamp -webkit-line-clamp,
      class: clamp,
      values: 1 2 3 4 5 6 7 8 9 10,
    ),
    'line-height': (
      property: line-height,
      class: lh,
      values: (
        1: 1,
        sm: var(--line-height-sm),
        base: var(--line-height-base),
        lg: var(--line-height-lg),
      ),
    ),
    'text-align': (
      responsive: true,
      property: text-align,
      class: text,
      values: left right center,
    ),
    'text-decoration': (
      property: text-decoration,
      values: none underline,
    ),
    'text-transform': (
      property: text-transform,
      class: text,
      values: lowercase uppercase capitalize,
    ),
    'white-space': (
      property: white-space,
      class: text,
      values: (
        wrap: normal,
        nowrap: nowrap,
      ),
    ),
    // --- Flex --- //
    'align-items':
      (
        responsive: true,
        property: align-items,
        values: (
          start: flex-start,
          end: flex-end,
          center: center,
          baseline: baseline,
          stretch: stretch,
        ),
      ),
    'align-self': (
      responsive: true,
      property: align-self,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      ),
    ),
    'flex-direction': (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse,
    ),
    'justify-content': (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
      ),
    ),
    'order': (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),
    // --- Margin --- //
    'margin':
      (
        responsive: true,
        property: margin,
        class: m,
        values:
          map.merge(
            variables.$spacers,
            (
              auto: auto,
            )
          ),
      ),
    'margin-x': (
      responsive: true,
      property: margin-left margin-right,
      class: mx,
      values:
        map.merge(
          variables.$spacers,
          (
            auto: auto,
          )
        ),
    ),
    'margin-y': (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values:
        map.merge(
          variables.$spacers,
          (
            auto: auto,
          )
        ),
    ),
    'margin-top': (
      responsive: true,
      property: margin-top,
      class: mt,
      values:
        map.merge(
          variables.$spacers,
          (
            auto: auto,
          )
        ),
    ),
    'margin-right': (
      responsive: true,
      property: margin-right,
      class: mr,
      values:
        map.merge(
          variables.$spacers,
          (
            auto: auto,
          )
        ),
    ),
    'margin-bottom': (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values:
        map.merge(
          variables.$spacers,
          (
            auto: auto,
          )
        ),
    ),
    'margin-left': (
      responsive: true,
      property: margin-left,
      class: ml,
      values:
        map.merge(
          variables.$spacers,
          (
            auto: auto,
          )
        ),
    ),
    'negative-margin': (
      responsive: true,
      property: margin,
      class: m,
      values: variables.$negative-spacers,
    ),
    'negative-margin-x': (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: variables.$negative-spacers,
    ),
    'negative-margin-y': (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: variables.$negative-spacers,
    ),
    'negative-margin-top': (
      responsive: true,
      property: margin-top,
      class: mt,
      values: variables.$negative-spacers,
    ),
    'negative-margin-right': (
      responsive: true,
      property: margin-right,
      class: mr,
      values: variables.$negative-spacers,
    ),
    'negative-margin-bottom': (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: variables.$negative-spacers,
    ),
    'negative-margin-left': (
      responsive: true,
      property: margin-left,
      class: ml,
      values: variables.$negative-spacers,
    ),
    // --- Padding --- //
    'padding':
      (
        responsive: true,
        property: padding,
        class: p,
        values: variables.$spacers,
      ),
    'padding-x': (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: variables.$spacers,
    ),
    'padding-y': (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: variables.$spacers,
    ),
    'padding-top': (
      responsive: true,
      property: padding-top,
      class: pt,
      values: variables.$spacers,
    ),
    'padding-right': (
      responsive: true,
      property: padding-right,
      class: pr,
      values: variables.$spacers,
    ),
    'padding-bottom': (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: variables.$spacers,
    ),
    'padding-left': (
      responsive: true,
      property: padding-left,
      class: pl,
      values: variables.$spacers,
    ),
  ),
  $utilities
);