/* stylelint-disable pitcher/max-lines -- this file is used in the showcase so it should contain all utility classes */
@use 'sass:map' as map;
@use '../configs/variables';
@use 'util-colors' as util-colors;
@use '../functions' as *;

/// @prop
$utilities: (
  'opacity': (
    property: opacity,
    values: (
      0: 0,
      25: 0.25,
      50: 0.5,
      75: 0.75,
      100: 1,
    ),
  ),
  'overflow': (
    property: overflow,
    values: auto hidden visible,
  ),
  'overflow-x': (
    property: overflow-x,
    values: auto hidden visible scroll,
  ),
  'overflow-y': (
    property: overflow-y,
    values: auto hidden visible scroll,
  ),
  'display': (
    responsive: true,
    property: display,
    class: d,
    values: inline inline-block block grid flex inline-flex none,
  ),
  'position': (
    property: position,
    values: static relative absolute fixed,
  ),
  // Borders
  'border':
    (
      property: border,
      values: (
        null: 1px solid var(--light-border-color),
        0: 0,
      ),
    ),
  'border-top': (
    property: border-top,
    values: (
      null: 1px solid var(--light-border-color),
      0: 0,
    ),
  ),
  'border-end': (
    property: border-inline-end,
    class: border-end,
    values: (
      null: 1px solid var(--light-border-color),
      0: 0,
    ),
  ),
  'border-bottom': (
    property: border-bottom,
    values: (
      null: 1px solid var(--light-border-color),
      0: 0,
    ),
  ),
  'border-start': (
    property: border-inline-start,
    class: border-start,
    values: (
      null: 1px solid var(--light-border-color),
      0: 0,
    ),
  ),
  // Width and Height
  'width':
    (
      property: width,
      class: w,
      values: (
        100: 100%,
        auto: auto,
        '100vw': 100vw,
      ),
    ),
  'height': (
    property: height,
    class: h,
    values: (
      100: 100%,
      auto: auto,
      '100vh': 100vh,
    ),
  ),
  'min-width': (
    property: min-width,
    values: (
      0: 0,
      100: 100%,
      '100vw': 100vw,
    ),
  ),
  'min-height': (
    property: min-height,
    values: (
      0: 0,
      100: 100%,
      '100vh': 100vh,
    ),
  ),
  'max-width': (
    property: max-width,
    values: (
      100: 100%,
    ),
  ),
  'max-height': (
    property: max-height,
    values: (
      100: 100%,
    ),
  ),
  // Flex utilities
  'flex-direction':
    (
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse,
    ),
  'flex-grow': (
    property: flex-grow,
    class: flex,
    values: (
      grow-0: 0,
      grow-1: 1,
    ),
  ),
  'flex-shrink': (
    property: flex-shrink,
    class: flex,
    values: (
      shrink-0: 0,
      shrink-1: 1,
    ),
  ),
  'flex-wrap': (
    property: flex-wrap,
    class: flex,
    values: wrap nowrap wrap-reverse,
  ),
  'justify-content': (
    property: justify-content,
    values: (
      start: flex-start,
      end: flex-end,
      center: center,
      between: space-between,
      around: space-around,
      evenly: space-evenly,
    ),
  ),
  'align-items': (
    property: align-items,
    values: (
      start: flex-start,
      end: flex-end,
      center: center,
      baseline: baseline,
      stretch: stretch,
    ),
  ),
  'align-content': (
    property: align-content,
    values: (
      start: flex-start,
      end: flex-end,
      center: center,
      between: space-between,
      around: space-around,
      stretch: stretch,
    ),
  ),
  'align-self': (
    property: align-self,
    values: (
      auto: auto,
      start: flex-start,
      end: flex-end,
      center: center,
      baseline: baseline,
      stretch: stretch,
    ),
  ),
  // Margin utilities
  'gap':
    (
      property: gap,
      values: variables.$spacers,
    ),
  'margin': (
    responsive: true,
    property: margin,
    class: m,
    values:
      map.merge(
        variables.$spacers,
        (
          auto: auto,
        )
      ),
  ),
  'margin-x': (
    responsive: true,
    property: margin-right margin-left,
    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-bottom': (
    responsive: true,
    property: margin-bottom,
    class: mb,
    values:
      map.merge(
        variables.$spacers,
        (
          auto: auto,
        )
      ),
  ),
  'margin-start': (
    responsive: true,
    property: margin-inline-start,
    class: ms,
    values:
      map.merge(
        variables.$spacers,
        (
          auto: auto,
        )
      ),
  ),
  'margin-end': (
    responsive: true,
    property: margin-inline-end,
    class: me,
    values:
      map.merge(
        variables.$spacers,
        (
          auto: auto,
        )
      ),
  ),
  // Negative margin utilities
  'negative-margin':
    (
      property: margin,
      class: '-m',
      values: variables.$negative-spacers,
    ),
  'negative-margin-x': (
    property: margin-inline-start margin-inline-end,
    class: '-mx',
    values: variables.$negative-spacers,
  ),
  'negative-margin-y': (
    property: margin-top margin-bottom,
    class: '-my',
    values: variables.$negative-spacers,
  ),
  'negative-margin-top': (
    property: margin-top,
    class: '-mt',
    values: variables.$negative-spacers,
  ),
  'negative-margin-bottom': (
    property: margin-bottom,
    class: '-mb',
    values: variables.$negative-spacers,
  ),
  'negative-margin-start': (
    property: margin-inline-start,
    class: '-ms',
    values: variables.$negative-spacers,
  ),
  'negative-margin-end': (
    property: margin-inline-end,
    class: '-me',
    values: variables.$negative-spacers,
  ),
  // Padding utilities
  'padding':
    (
      responsive: true,
      property: padding,
      class: p,
      values: variables.$spacers,
    ),
  'padding-x': (
    responsive: true,
    property: padding-inline-start padding-inline-end,
    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-bottom': (
    responsive: true,
    property: padding-bottom,
    class: pb,
    values: variables.$spacers,
  ),
  'padding-start': (
    responsive: true,
    property: padding-inline-start,
    class: ps,
    values: variables.$spacers,
  ),
  'padding-end': (
    responsive: true,
    property: padding-inline-end,
    class: pe,
    values: variables.$spacers,
  ),
  // Text
  'font-family':
    (
      property: font-family,
      class: font,
      values: (
        monospace: var(--font-monospace),
      ),
    ),
  'text-transform': (
    property: text-transform,
    class: text,
    values: lowercase uppercase capitalize,
  ),
  'white-space': (
    property: white-space,
    class: text,
    values: (
      wrap: normal,
      nowrap: nowrap,
    ),
  ),
  'shadow': (
    property: box-shadow,
    class: shadow,
    values: (
      null: var(--shadow),
      lg: var(--shadow-lg),
      sm: var(--shadow-sm),
      none: none,
    ),
  ),
  'font-size': (
    property: font-size,
    values: (
      12: 0.75rem,
      14: 0.875rem,
      16: 1rem,
      18: 1.125rem,
      20: 1.25rem,
      24: 1.5rem,
    ),
  ),
  'text-decoration': (
    property: text-decoration,
    values: none underline,
  ),
  'color': (
    property: color,
    class: text,
    values:
      map.merge(
        util-colors.$var-colors,
        (
          'white': var(--fff),
          'black': var(--000),
        )
      ),
  ),
  'background-color': (
    property: background-color,
    class: bg,
    values: (
      'white': var(--fff),
      'transparent': transparent,
    ),
  ),
  'border-radius': (
    property: border-radius,
    values: (
      0: 0,
      circle: 50%,
    ),
  ),
  'cursor': (
    property: cursor,
    values: pointer,
  ),
  'direction': (
    property: direction,
    class: null,
    values: rtl ltr,
  ),
  'object-fit': (
    property: object-fit,
    values: contain cover,
  ),
  'text-align': (
    property: text-align,
    class: text,
    values: left right center end start,
  ),
  'vertical-align': (
    property: vertical-align,
    values: middle baseline top bottom,
  ),
);

.font-monospaced-numbers {
  font-feature-settings: 'ss03' !important;
}

.font-english-numbers {
  font-feature-settings: normal !important;
}

$font-weight-map: (
  'light': 300,
  'normal': 400,
  'bold': 600,
);

@mixin font-weight-without-variable-support($font-weight-name) {
  font-weight: map.get($font-weight-map, $font-weight-name);
}

@mixin font-weight-with-variable-support($font-weight-name) {
  font-weight: map.get($font-weight-map, $font-weight-name);
  @include supports-font-variables {
    font-weight: normal !important;
    font-variation-settings: 'wght' map.get($font-weight-map, $font-weight-name) !important;
  }
}

@each $font-weight-name, $font-weight-value in $font-weight-map {
  .font-weight-#{$font-weight-name} {
    @include font-weight-without-variable-support($font-weight-name);
  }
}

.black-50 {
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- using alpha */
  background-color: hsl(
    var(--_body-hue) var(--_body-saturation) var(--lightness-0) / 50%
  ) !important;
}
.white-50 {
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- using alpha */
  background-color: hsl(
    var(--_body-hue) var(--_body-saturation) var(--lightness-1000) / 50%
  ) !important;
}