// ==========================================================================
// TOOLS / #TYPOGRAPHY
// ==========================================================================

//
// These mixins allow us to quickly and consistently generate common text
// patterns such as colours and font-weight
//

// Text colour
// ==========================================================================

//
// Sets the text colour, including a suitable override for print.
//
// Original code taken from GDS (Government Digital Service)
// https://github.com/alphagov/govuk-frontend
//

@use 'sass:math';

@mixin dfe-text-color {
  color: $dfe-text-color;

  @include govuk-media-query($media-type: print) {
    color: $dfe-print-text-color;
  }
}

// Normal font weight
// ==========================================================================

//
// @param {Boolean} $important [false] - Whether to mark declarations as
//   `!important`. Generally Used to create override classes.
//

@mixin dfe-typography-weight-normal($important: false) {
  font-weight: $dfe-font-normal iff($important, !important);
}

// Bold font weight
// ==========================================================================

//
// @param {Boolean} $important [false] - Whether to mark declarations as
//   `!important`. Generally Used to create override classes.
//

@mixin dfe-typography-weight-bold($important: false) {
  font-weight: $dfe-font-bold iff($important, !important);
}

// Line height
// ==========================================================================

//
// Convert line-heights specified in pixels into a relative value, unless
// they are already unit-less (and thus already treated as relative values)
// or the units do not match the units used for the font size.
//
// @param {Number} $line-height Line height
// @param {Number} $font-size Font size
// @return {Number} The line height as either a relative value or unmodified
//

@function _dfe-line-height($line-height, $font-size) {
  @if not unitless($line-height) and unit($line-height) == unit($font-size) {
    // Explicitly rounding to 5 decimal places to match the node-sass/libsass default precision.
    // This is expanded to 10 in dart-sass and results in significant line height differences
    // Therefore by rounding it here we achieve consistent rendering across node-sass and dart-sass
    $ten-to-the-power-five: 100000;
    $line-height: 1.33333;
  }

  @return $line-height;
}

// Responsive typography
// ==========================================================================

//
// Takes a 'font map' as an argument and uses it to create font-size and
// line-height declarations for different breakpoints, and for print.
//
// Example font map:
//
// $my-font-map: (
//   null: (
//     font-size: 16px,
//     line-height: 20px
//   ),
//   tablet: (
//     font-size: 19px,
//     line-height: 25px
//   ),
//   print: (
//     font-size: 14pt,
//     line-height: 1.15
//   )
// );\
//
// @example scss
//  .foo {
//    @include dfe-typography-responsive(19);
//   }
//
//  .foo {
//    @include dfe-typography-responsive(32, $important: true);
//   }
//
// @param {Map} $font-map - Font map
// @param {Number} $override-line-height [false] - Non responsive custom line
//   height. Omit to use the line height from the font map.
// @param {Boolean} $important [false] - Whether to mark declarations as
//   `!important`.
//
// 1. Mark rules as !important if $important is true - this will result in
//    these variables becoming strings, so this needs to happen//after* they
//    are used in calculations
//

@mixin dfe-typography-responsive($size, $override-line-height: false, $important: false) {

  @if not map-has-key($dfe-typography-scale, $size) {
    @error 'Unknown font size `#{$size}` - expected a point from the typography scale.';
  }

  $font-map: map-get($dfe-typography-scale, $size);

  @each $breakpoint, $breakpoint-map in $font-map {
    $font-size: map-get($breakpoint-map, 'font-size');
    $font-size-rem: dfe-px-to-rem($font-size);

    $line-height: _dfe-line-height($line-height: if($override-line-height, $override-line-height, map-get($breakpoint-map, 'line-height')), $font-size: $font-size);

    // [1] //
    $font-size: $font-size iff($important, !important);
    $font-size-rem: $font-size-rem iff($important, !important);
    $line-height: $line-height iff($important, !important);

    @if $breakpoint == null {
      font-size: $font-size;
      font-size: $font-size-rem;
      line-height: $line-height;
    } @else if $breakpoint == 'print' {
      @include govuk-media-query($media-type: print) {
        font-size: $font-size;
        line-height: $line-height;
      }
    } @else {
      @include govuk-media-query($from: $breakpoint) {
        font-size: $font-size;
        font-size: $font-size-rem;
        line-height: $line-height;
      }
    }
  }
}

// Font
// ==========================================================================

//
// @example scss
//  .foo {
//    @include dfe-font(19);
//   }
//
//  .foo {
//    @include dfe-font(32, $weight: bold);
//   }
//
// @param {Number} $size - Size of the font as it would appear on desktop -
//   uses the responsive font size map
// @param {String} $weight [normal] - Weight: `bold` or `normal`
// @param {Number} $line-height [false] - Line-height, if overriding the default
//

@mixin dfe-font($size, $weight: normal, $line-height: false) {

  @if $weight == normal {
    @include dfe-typography-weight-normal;
  } @else if $weight == bold {
    @include dfe-typography-weight-bold;
  }

  @if $size {
    @include dfe-typography-responsive($size, $override-line-height: $line-height);
  }
}