@use "sass:math";

@each $type in map-keys($fontSizes) {
  $fontFace: '' !default;
  $lineHeight: '' !default;

  @if map-has-key($fontFaces, $type) {
    $fontFace: map-get($fontFaces, $type);
  }
  $fontSize: map-get($fontSizes, $type);

  @if map-has-key($lineHeights, $type) {
    $lineHeight: math.div(map-get($lineHeights, $type), map-get($lineHeights, $type) * 0 + 1);
  }

  %#{$type} {
    @if $fontFace != '' {
      font-family: $fontFace;
    }

    @include vr-baseline($fontSize, $line-height: $lineHeight);

    font-size: $fontSize;
    line-height: $lineHeight + 0.00001;

    @each $tp in map-keys($fontSizes) {
      $lh: '' !default;
      $fs: map-get($fontSizes, $tp);

      @if map-has-key($lineHeights, $tp) {
        $lh: math.div(map-get($lineHeights, $tp), map-get($lineHeights, $tp) * 0 + 1);
      }

      @if $type !=$tp and $fs <=$fontSize {
        &.#{$tp} {
          font-size: $fs;
          line-height: $lh;
        }
      }
    }
  }
}

// TODO: Update later
%copy-spacing {
  h1,
  .h1 {
    margin-bottom: rem-calc(64);
  }

  h2,
  .h2 {
    margin-bottom: rem-calc(48);
  }

  h3,
  .h3 {
    margin-bottom: rem-calc(48);
  }

  h4,
  .h4 {
    margin-bottom: rem-calc(24);
  }

  h5,
  .h5 {
    margin-bottom: rem-calc(24);
  }

  h6,
  .h6 {
    margin-bottom: rem-calc(24);
  }

  p,
  .p {
    margin-bottom: rem-calc(24);
  }

  .body-smallest {
    margin-bottom: rem-calc(16);
  }
}