@use 'func' as *;

// --- Font Families

/**
 * Do not directly reference. Use the $font-stack-sans and $font-stack-mono variables instead
 */
$internal-font-stack-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$internal-font-stack-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

// See export.scss
$font-stack-sans: var(--font-stack-sans);
$font-stack-mono: var(--font-stack-mono);

// --- Text Sizes/Scale
// Chosen to produce integer sizes from a base font size of 16px

$text: (
  text-xs: (
    size: 0.5rem,   // 8px
  ),
  text-s: (
    size: 0.75rem,  // 12px
  ),
  text-ms: (
    size: 0.875rem, // 14px
  ),
  text-m: (
    size: 1rem,     // 16px
    weight: bolder,
  ),
  text-ml: (
    size: 1.25rem,  // 18px
    weight: bolder,
  ),
  text-l: (
    size: 1.5rem,   // 24px
    weight: bolder,
  ),
  text-xl: (
    size: 2rem,     // 32px
    weight: bolder,
  ),
  text-2xl: (
    size: 2.5rem,   // 40px
    weight: bolder,
  ),
  text-3xl: (
    size: 3rem,     // 48px
    weight: bolder,
  ),
  text-4xl: (
    size: 4rem,     // 64px
    weight: bolder,
  )
);

$highlight-weight: 600;

@function text($name: string) {
  @return map-get(map-get($text, "text-" + #{$name}), size);
}

// --- Line heights

$lh-tight: 1;
$lh-condensed: 1.25;
$lh-normal: 1.5;

// --- Mixins

@mixin _text-base {
  font-family: $font-stack-sans;
  font-weight: normal;
  font-style: normal;
}

// General text

@mixin text($name: string) {
  $text-def: map-get($text, "text-" + $name);
  $size: map-get($text-def, size);
  $weight: map-get($text-def, weight);

  @include _text-base;
  @if $size {
    font-size: $size;
  }
  @if $weight {
    font-weight: $weight;
  }
}

@mixin text-mono-m {
  font-size: text(m);
  font-family: $font-stack-mono;
  font-weight: bold;
  font-style: normal;
}

@mixin text-mono-s {
  font-size: text(s);
  font-family: $font-stack-mono;
  font-weight: bold;
  font-style: normal;
}

// Line heights

@mixin line-height-normal {
  line-height: $lh-normal;
}

@mixin line-height-condensed {
  line-height: $lh-condensed;
}

@mixin line-height-tight {
  line-height: $lh-tight;
}
