@use 'sass:math';

@import './variables';
@import '../breakpoints/mixins';
@import '../breakpoints/variables';
@import '../tokens/dynamic-rem';

@mixin telia-typography($type, $weight) {
  // Set font-family
  @if map_has_key($typography, $type) {
    font-family: map-get($typography, $type);
  } @else {
    @error 'Unknown typography #{$type}';
  }

  // Set font-weight
  // First check that typography exists
  @if map_has_key($font-weight, $type) {
    $weight-map: map-get($font-weight, $type);

    // Check that typography has certain font-weight possibility
    @if map_has_key($weight-map, $weight) {
      font-weight: map-get($weight-map, $weight);
    } @else {
      @error 'Unknown font-weight for typography #{$type}';
    }
  } @else {
    @error 'Unknown typography for font-weight #{$type}';
  }
}

@function dynamic-font-size(
  $font-size-min,
  $font-size-max,
  $vw-min: $telia-fluid-breakpoint-medium,
  $vw-max: $telia-fluid-breakpoint-xlarge
) {
  $dynamic-font-size-min: dynamic-rem($font-size-min);
  $dynamic-vw-min: dynamic-rem($vw-min);

  $result: calc(
    #{$dynamic-font-size-min} + #{strip-unit($font-size-max - $font-size-min)} *
      (100vw - #{$dynamic-vw-min}) / #{strip-unit($vw-max - $vw-min)}
  );

  @return $result;
}

/* stylelint-disable */

/// Responsive font sizing. The size of the font will scale with the viewport
/// based on the information that you provide it.
///
/// @param {length} $font-size-min - minimum font size (10px based rem)
/// @param {length} $font-size-max - maximum font size (10px based rem)
/// @param {length} $vw-min - [$telia-fluid-breakpoint-medium] the minimum viewport width
/// @param {length} $vw-max - [$telia-fluid-breakpoint-xlarge] the maximum viewport width
///
/// @require {function} strip-unit
///
/// @example
/// See typography story or readme.
///
/// Concept of precise control from Mike Riethmuller
/// https://madebymike.com.au/writing/precise-control-responsive-typography/
///
/// Original mixin implementation from Indrek Paas
/// http://www.sassmeister.com/gist/7f22e44ace49b5124eec
///
@mixin telia-fluid-type(
  $font-size-min,
  $font-size-max,
  $vw-min: $telia-fluid-breakpoint-medium,
  $vw-max: $telia-fluid-breakpoint-xlarge
) {
  @if (
    unitless($font-size-min) or
      unitless($font-size-max) or
      unitless($vw-min) or
      unitless($vw-max)
  ) {
    @error "All min and max properties must be provided with a rem unit";
  }

  @if (
    unit($font-size-min) ==
      unit($font-size-max) and
      unit($font-size-min) ==
      unit($vw-min) and
      unit($font-size-min) ==
      unit($vw-max)
  ) {
    font-size: dynamic-rem($font-size-min);

    @include telia-breakpoint(md) {
      font-size: dynamic-font-size(
        $font-size-min,
        $font-size-max,
        $vw-min,
        $vw-max
      );
    }

    @include telia-breakpoint(xl) {
      font-size: dynamic-rem($font-size-max);
    }
  } @else {
    @error 'Incompatible units were passed:#{unit($font-size-min)}, #{unit($font-size-max)}, #{unit($vw-min)},#{unit($vw-max)}';
  }
}

/// Generate font size that is not fluid.
///
/// @param {length} $font-size - the desired font size
///
@mixin telia-static-type($font-size) {
  @if (unitless($font-size)) {
    @error 'Size must be provided with a unit';
  }

  font-size: dynamic-rem($font-size);
}

/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
///
/// Original implementation by Miriam Suzanne
/// http://stackoverflow.com/a/12335841/1339786
///
/// Update implementation from Hugo Giraudel
/// https://css-tricks.com/snippets/sass/strip-unit-function/

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return math.div($number, $number * 0 + 1);
  }

  @return $number;
}

@mixin telia-paragraph-100() {
  @include telia-typography('teliasans', 'normal');
  @include telia-static-type(1.6rem);
  line-height: 1.5;
}

@mixin telia-paragraph-200() {
  @include telia-typography('teliasans', 'normal');
  @include telia-static-type(1.6rem);
  line-height: 1.75;
}

@mixin telia-preamble-100() {
  @include telia-typography('teliasans', 'normal');
  @include telia-static-type(2rem);
  line-height: 1.5;
}

@mixin telia-preamble-200() {
  @include telia-typography('teliasans', 'normal');
  @include telia-fluid-type(2rem, 2.4rem);
  line-height: 1.5;
}

@mixin telia-additional-100() {
  @include telia-typography('teliasans', 'normal');
  @include telia-static-type(1.4rem);
  line-height: 1.5;
}

@mixin telia-subsection-100() {
  @include telia-typography('teliasans', 'medium');
  @include telia-static-type(1.6rem);
  line-height: 1.25;
}

@mixin telia-overline-100() {
  @include telia-typography('teliasans', 'medium');
  @include telia-static-type(1.4rem);
  letter-spacing: 0.1rem;
  line-height: 1;
  text-transform: uppercase;
}

@mixin telia-overline-200() {
  @include telia-typography('teliasans', 'medium');
  @include telia-fluid-type(1.4rem, 1.6rem);
  letter-spacing: 0.1rem;
  line-height: 1;
  text-transform: uppercase;
}

@mixin telia-title-100() {
  @include telia-typography('teliasans', 'bold');
  @include telia-fluid-type(1.6rem, 2rem);
  line-height: 1.25;
}

@mixin telia-title-200 {
  @include telia-typography('teliasans', 'bold');
  @include telia-fluid-type(2rem, 2.4rem);
  line-height: 1.25;
}

@mixin telia-title-300 {
  @include telia-typography('teliasans', 'bold');
  @include telia-fluid-type(2.4rem, 3.2rem);
  line-height: 1.25;
}

@mixin telia-title-400 {
  @include telia-typography('teliasans', 'bold');
  @include telia-fluid-type(2.8rem, 4rem);
  line-height: 1.25;
}

@mixin telia-title-500 {
  @include telia-typography('teliasans', 'bold');
  @include telia-fluid-type(3.2rem, 4.8rem);
  line-height: 1;
}

@mixin telia-title-600 {
  @include telia-typography('teliasans', 'bold');
  @include telia-fluid-type(3.6rem, 5.6rem);
  line-height: 1;
}

@mixin telia-title-700 {
  @include telia-typography('teliasans', 'bold');
  @include telia-fluid-type(4rem, 6.4rem);
  line-height: 1;
}

@mixin telia-display-25 {
  @include telia-typography('teliasansheading', 'normal');
  @include telia-fluid-type(3.2rem, 4.8rem);
  line-height: 1;
}

@mixin telia-display-50 {
  @include telia-typography('teliasansheading', 'normal');
  @include telia-fluid-type(3.6rem, 5.6rem);
  line-height: 1;
}

@mixin telia-display-100 {
  @include telia-typography('teliasansheading', 'normal');
  @include telia-fluid-type(4rem, 6.4rem);
  line-height: 1;
}

@mixin telia-display-200 {
  @include telia-typography('teliasansheading', 'normal');
  @include telia-fluid-type(4.8rem, 8rem);
  line-height: 1;
}

/* stylelint-enable */
