// Math module for division
@use "sass:math";

@import "../atoms-settings";
@import 'au-passata';
@import "fonts";

@include define-font-variables();

body {
  font-family: $font-string;
  @include set-font(0, "single");
}

h1,
h2,
h3,
p,
ul,
ol {
  max-width: $line-width-max;
}

.text--light {
  font-weight: $font-weight-light;
}

.no-margins > p {
  margin: 0;
}

em {
  display: inline-block;
  font-style: normal;
  transform: skewX(-9deg);
}

@for $i from 1 through $font-size-num {
  $n: $i -  $font-size-offset-default-size;

  $name: null;
  @if $n < 0 {
    $name: "m" + abs($n);
  }
  @else if $n == 0 {
    $name: $n;
  }
  @else {
    $name: "p" + $n;;
  }

  .text--size-#{$name}-single {
    @include set-font($n, "single");
    margin: 0;
  }

  .text--size-#{$name}-multiple {
    @include set-font($n, "multiple");
    margin: 0;
  }

  .text--size-#{$name}-multiple-default {
    @include set-font($n, "multiple", $max-width: "default");
    margin: 0;
  }
}


@each $scale-name, $scale in $font-sizes {
  .view--#{$scale-name} {
    @each $index, $size in $scale {
      $name: null;
      @if $index < 0 {
        $name: "m" + abs($index);
      }
      @else if $index == 0 {
        $name: $index;
      }
      @else {
        $name: "p" + $index;;
      }

      & .text--size-#{$name}-single {
        position: relative;

        &::before,
        &::after {
          white-space: nowrap;
          font-size: .8rem;
          color: #b2b2b2;
          font-family: "Courier New";
          display: block;
          line-height: 1;
        }

        &::before {
          content: "#{$index}";
          position: absolute;
          bottom: 0;
          left: 0;
        }

        &::after {
          padding-left: 1.4rem;
          $size: math.div(round(1000 * $size), 1000);
          $line-height: $size * (math.div($line-height-scaleable-part, 1em)) + (math.div($size-rem, 1em)) * $line-height-single-fixed-part;
          $line-height: math.div(round(1000 * $line-height), 1000);
          $size-in-px: round((math.div($size, 1rem)) * (math.div($size-rem, 1em)) * 16px);
          $line-height-in-px: round(( math.div($line-height, 1rem)) * (math.div($size-rem, 1em)) * 16px);
          content: "#{$size}/#{$line-height} ~ #{$size-in-px}/#{$line-height-in-px}";
        }
      }

      & .text--size-#{$name}-multiple {
        position: relative;

        &::before,
        &::after {
          white-space: nowrap;
          font-size: .8rem;
          color: #b2b2b2;
          font-family: "Courier New";
          display: block;
          line-height: 1;
        }

        &::before {
          content: "#{$index}";
          position: absolute;
          bottom: 0;
          left: 0;
        }

        &::after {
          padding-left: 1.4rem;
          $size: math.div(round(1000 * $size), 1000);
          $line-height: $size * (math.div($line-height-scaleable-part, 1em)) + (math.div($size-rem, 1em)) * $line-height-multiple-fixed-part;
          $line-height: math.div(round(1000 * $line-height), 1000);
          $size-in-px: round((math.div($size, 1rem)) * (math.div($size-rem, 1em)) * 16px);
          $line-height-in-px: round((math.div($line-height, 1rem)) * (math.div($size-rem, 1em)) * 16px);
          content: "#{$size}/#{$line-height} ~ #{$size-in-px}/#{$line-height-in-px}";
        }
      }
    }
  }

}



.sample-peto {
  font-family: "AU Peto";
  font-size: var(--font-size-p2);
  line-height: var(--font-size-p2);

  & span {
    display: block;
  }
}