//
// Design System : FONTS
//
// About : Font, line-height, and color for body text, headings, and more.

//
// VARIABLES
//

// stylelint-disable value-keyword-case
@use "sass:math";

$font-family-sans-serif: "Lato", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$font-family-monospace: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
// stylelint-enable value-keyword-case

// https://en.wikipedia.org/wiki/Metric_prefix
$fs-map: (
  "peta": 4.75rem, // 76px
  "tera": 3.375rem, // 54px
  "giga": 2.25rem, // 36px
  "mega": 1.75rem, // 28px
  "kilo": 1.5rem, // 24px
  "hecto": 1.25rem, // 20px
  "deca": 1.125rem, // 18px
  "base": 1rem, // 16px
  "deci": .875rem, // 14px
  "centi": .75rem // 12px
) !default;

$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg: map-get($fs-map, "hecto") !default;
$font-size-md: map-get($fs-map, "deci") !default;
$font-size-sm: map-get($fs-map, "centi") !default;

$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 700 !default;
$font-weight-black: 900 !default;

$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;

$h1-font-size: map-get($fs-map, "peta") !default;
$h2-font-size: map-get($fs-map, "tera") !default;
$h3-font-size: map-get($fs-map, "giga") !default;
$h4-font-size: map-get($fs-map, "kilo") !default;
$h5-font-size: map-get($fs-map, "base") !default;
$h6-font-size: map-get($fs-map, "deci") !default;

$heading1-weight: 700 !default;
$heading2-weight: 700 !default;
$heading3-weight: 400 !default;
$heading4-weight: 400 !default;
$heading5-weight: 700 !default;
$heading6-weight: 400 !default;

$lead-font-size: map-get($fs-map, "hecto") !default;
$lead-font-weight: $font-weight-normal !default;

$small-font-size: map-get($fs-map, "centi") !default;

//
// FUNCTIONS
//

@function rem($px) {
  @return math.div($px, $font-size-base) * 1rem;
}

//
// MIXINS
//

@mixin font-size($size) {
  @if map-has-key($fs-map, $size) {
    font-size: map-get($fs-map, $size);
  } @else {
    @warn "This is not a valid step !";
  }
}

// stylelint-disable declaration-no-important
@mixin text-emphasis-variant($parent, $color) {
  #{$parent} {
    color: $color !important;
  }
}

// Gradient text
@mixin text-gradient($parent, $gradient, $ie-fallback) {
  #{$parent} {
    color: transparent;
    background-image: $gradient;
    // Force webkit prefix because this property is experimental
    // TODO: replace it with a stable solution
    -webkit-background-clip: text; // stylelint-disable-line property-no-vendor-prefix
    background-clip: text;
    -webkit-text-fill-color: transparent;

    @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
      color: $ie-fallback;
      background: transparent;
    }
  }
}

@mixin reset-text {
  font-weight: $font-weight-normal;
  font-family: $font-family-base;
  // We deliberately do NOT reset font-size or word-wrap.
  font-style: normal;
  line-height: $line-height-base;
  letter-spacing: normal;
  white-space: normal;
  text-align: left; // Fallback for where `start` is not supported
  text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties
  text-transform: none;
  text-decoration: none;
  text-shadow: none;
  word-break: normal;
  word-spacing: normal;
  line-break: auto;
}

// Text truncate
// Requires inline-block or block for proper styling
@mixin text-truncate() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}