/**
 * Typography
 * https://stackoverflow.design/product/base/typography/
 */
@use "sass:map";
@use "sass:list";
@import "helpers";

$dataset: (
        font-family:(
                type:value-key-as-postfix,
                value:(
                        sans:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
                        serif:'Georgia, Cambria, "Times New Roman", Times, serif'
                )
        ),
        color:(
                type:value-key-as-postfix,
                prefix:'fc',
                value:(
                        "white":'#fff',
                        "black":'#000'
                )
        ),
        background-color:(
                type:value-key-as-postfix,
                prefix:'bg',
                value:(
                        "white":'#fff',
                        "black":'#000'
                )
        ),
        line-height:(
                type:value-key-as-postfix,
                prefix:'lh',
                value:(
                        "xs":'1',
                        "sm":'1.15',
                        "md":'1.3',
                        "lg":'1.6',
                        "xl":'1.92',
                        "xxl":'2',
                        "unset":'unset',
                )
        ),
        font-style: normal italic,
        text-transform: capitalize lowercase uppercase none unset,
        text-decoration: underline none,
        text-align: left center right justify,
        white-space: normal nowrap pre pre-wrap pre-line,
        word-break: normal break-all keep-all inherit initial unset,
        break-word:(
                type:mixin
        )
);


@function _contains($items, $value) {
  @each $i in $items {
    @if $i == $value { @return true; }
  }
  @return false;
}

$font-families: ();
$weights: ();

@each $name, $data in $fonts {
  @if type-of($data) == "map" {
    // font-face
    @if map-has-key($data, "font-face") {
      $font-families: map.set($font-families, $name, map-get($data, "font-face"));
    }

    // weight list (collect unique)
    @if map-has-key($data, "weight") {
      @each $w in map-get($data, "weight") {
        @if not _contains($weights, $w) {
          $weights: list.append($weights, $w);
        }
      }
    }
  } @else if type-of($data) == "string" {
    $font-families: map.set($font-families, $name, $data);
  }
}

/* custom font-family */
$custom_font_family: map-merge(map-get($dataset, "font-family", "value"), $font-families);
$dataset: map.set($dataset, "font-family", "value", $custom_font_family);

/* build font-weight from _config.scss */
$aliases: (
        100: thin,
        200: extralight,
        300: light,
        400: normal,
        500: medium,
        600: semibold,
        700: bold,
        800: extrabold,
        900: black
);

$fw-values: ();
@each $w in $weights {
  $key: map-get($aliases, $w);
  @if $key == null { $key: $w; } // fallback (e.g. fw-550)
  $fw-values: map.set($fw-values, $key, $w);
}

/* inject font-weight dataset */
$dataset: map.set($dataset, "font-weight", (
        type: value-key-as-postfix,
        prefix: "fw",
        value: $fw-values
));

/* color */
$custom_color: map-merge(map-get($dataset, "color", "value"), $colors);
$dataset: map.set($dataset, "color", "value", $custom_color);

/* bg-color */
$custom_bg_color: map-merge(map-get($dataset, "background-color", "value"), $colors);
$dataset: map.set($dataset, "background-color", "value", $custom_bg_color);

/* Print */
@include print($dataset);

// CSS  variables
@include print-variables($custom_font_family, "font");
@include print-variables($custom_color, "color");