@use "sass:list";
@use "sass:map";
@use "sass:math";
@use "sass:meta";
@use "./lib/function";
@use "./settings";

// Export settings as custom properties
:root {
  $pkg: settings.$pkg;
  $settings: meta.module-variables("settings");

  // Breakpoints
  @each $name, $value in settings.$breakpoints {
    @if meta.type-of($value) == "number" {
      --#{$pkg}-breakpoint-#{$name}: #{$value};
    }
  }

  // Font family
  --#{$pkg}-font-family: #{meta.inspect(settings.$font-family)};

  // Font family presets
  @each $name, $value in settings.$font-family-presets {
    --#{$pkg}-font-family-#{$name}: #{meta.inspect($value)};
  }

  // Font size
  --#{$pkg}-font-size: #{math.div(
      settings.$font-size,
      settings.$font-base-size
    ) *
    1rem};

  // Font base size
  --#{$pkg}-font-base-size: #{settings.$font-base-size};

  // Font size presets
  @each $name, $value in settings.$font-size-presets {
    --#{$pkg}-font-size-#{$name}: #{$value * 1rem};
  }

  // Font weight
  --#{$pkg}-font-weight: #{settings.$font-weight};

  // Font weight presets
  @each $name, $value in settings.$font-weight-presets {
    --#{$pkg}-font-weight-#{$name}: #{$value};
  }

  // Font smoothing
  @each $name, $value in settings.$font-smoothing {
    --#{$pkg}-#{$name}-font-smoothing: #{$value};
  }

  // Font misc
  @each $name in ("font-variant", "font-feature-settings") {
    --#{$pkg}-#{$name}: #{map.get($settings, $name)};
  }

  // Text settings
  @each $name
    in (
      "line-height",
      "letter-spacing",
      "text-size-adjust",
      "word-break",
      "word-wrap",
      "line-break",
      "overflow-wrap",
      "hyphens"
    )
  {
    --#{$pkg}-#{$name}: #{map.get($settings, $name)};
  }

  // Color palette
  @each $name, $value in settings.$color-palette {
    --#{$pkg}-color-#{$name}: #{meta.inspect($value)};
  }

  // Color mappings
  @each $name, $value in settings.$color-mappings {
    --#{$pkg}-color-#{$name}: var(--#{$pkg}-color-#{$value});
  }

  // Misc
  @each $name in ("message-on-image-error") {
    --#{$pkg}-#{$name}: "#{map.get($settings, $name)}";
  }

  // Set base font size
  font-size: var(--#{$pkg}-font-base-size);
}

// Configure base settings
@if meta.type-of(settings.$applying-units) == "list" {
  $_selectors: () !default;

  // Build selector as follow:
  //   :where(<unit class>, <unit class>, <unit class> ...)
  @each $unit in settings.$applying-units {
    $_selectors: list.append(
      $_selectors,
      ".#{settings.$prefix}-#{$unit}",
      $separator: comma
    );

    @if $unit == "document" {
      @each $child in ("pict", "scrollable-table") {
        $_selectors: list.append(
          $_selectors,
          ".#{settings.$prefix}-#{$unit}__#{$child}",
          $separator: comma
        );
      }
    }
  }

  :where(#{$_selectors}) {
    $pkg: settings.$pkg;

    --position: relative;
    --z-index: auto;
    --transform-origin: 50% 50% 0;
    --transform: none;
    --overflow: visible;
    --display: block;
    --gap: normal;
    --align-content: normal;
    --align-items: normal;
    --justify-content: normal;
    --justify-items: normal;
    --box-sizing: content-box;
    --width: auto;
    --max-width: none;
    --height: auto;
    --max-height: none;
    --margin: 0;
    --padding: 0;
    --border: 0;
    --border-radius: 0;
    --color: inherit;
    --list-style: none;
    --visibility: visible;
    --opacity: 1;
    --background-color: transparent;
    --box-shadow: none;
    --transition: none;

    position: var(--position);
    z-index: var(--z-index);
    transform-origin: var(--transform-origin);
    transform: var(--transform);

    overflow: var(--overflow);
    display: var(--display);
    gap: var(--gap);
    align-content: var(--align-content);
    align-items: var(--align-items);
    justify-content: var(--justify-content);
    justify-items: var(--justify-items);

    box-sizing: var(--box-sizing);
    width: var(--width);
    max-width: var(--max-width);
    height: var(--height);
    max-height: var(--max-height);
    margin: var(--margin);
    padding: var(--padding);
    border: var(--border);
    border-radius: var(--border-radius);

    color: var(--color);
    list-style: var(--list-style);

    visibility: var(--visibility);
    opacity: var(--opacity);
    background-color: var(--background-color);
    box-shadow: var(--box-shadow);

    transition: var(--transition);
  }
}

// Configure font settings
@if meta.type-of(settings.$font-applying-units) == "list" {
  $_selectors: () !default;

  // Build selector as follow:
  //   :where(<unit class>, <unit class>, <unit class> ...)
  @each $unit in settings.$font-applying-units {
    $_selectors: list.append(
      $_selectors,
      ".#{settings.$prefix}-#{$unit}",
      $separator: comma
    );
  }

  :where(#{$_selectors}) {
    $pkg: settings.$pkg;

    --font-family: var(--#{$pkg}-font-family);
    --font-variant: var(--#{$pkg}-font-variant);
    --font-feature-settings: var(--#{$pkg}-font-feature-settings);
    --webkit-font-smoothing: var(--#{$pkg}-webkit-font-smoothing);
    --moz-osx-font-smoothing: var(--#{$pkg}-moz-osx-font-smoothing);
    --hyphens: var(--#{$pkg}-hyphens);
    --text-size-adjust: var(--#{$pkg}-text-size-adjust);
    --word-break: var(--#{$pkg}-word-break);
    --word-wrap: var(--#{$pkg}-word-wrap);
    --line-break: var(--#{$pkg}-line-break);
    --overflow-wrap: var(--#{$pkg}-overflow-wrap);

    font-family: var(--font-family, sans-serif);
    font-feature-settings: var(--font-feature-settings);
    font-variant: var(--font-variant);
    -webkit-font-smoothing: var(--webkit-font-smoothing);
    -moz-osx-font-smoothing: var(--moz-osx-font-smoothing);
    hyphens: var(--hyphens);

    // For mobile browsers
    // + https://caniuse.com/#search=text-size-adjust
    text-size-adjust: var(--text-size-adjust);
    word-break: var(--word-break);
    word-wrap: var(--word-wrap);
    line-break: var(--line-break);
    overflow-wrap: var(--overflow-wrap);
  }
}