@use "sass:math";
@use "../variables/typography";
@use "colour";
@use "media";

@mixin font-size($font-size-px) {
  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;
}

@mixin relative-font-size($font-size-px) {
  @warn "relative-font-size() will soon be deprecated in favour of font-size().";
  @include font-size($font-size-px);
}

@mixin main-font-weight {
  font-weight: typography.$main-font-weight;
}

@mixin main-font-weight-medium {
  font-weight: typography.$main-font-weight-medium;
}

@mixin main-font-weight-bold {
  font-weight: typography.$main-font-weight-bold;
}

@mixin main-font($bold: false) {
  font-family: typography.$main-font-family;
  font-style: normal;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  @if $bold {
    @include main-font-weight-bold;
  } @else {
    @include main-font-weight;
  }
}

@mixin heading-font {
  font-family: typography.$heading-font-family;
  font-weight: typography.$heading-font-weight;
}

@mixin detail-font($bold: false) {
  font-family: typography.$detail-font-family;
  font-style: normal;
  font-optical-sizing: auto;
  @if $bold {
    font-weight: typography.$detail-font-weight-bold;
  } @else {
    font-weight: typography.$detail-font-weight;
  }
}

@mixin detail-font-small {
  @include detail-font;
  @include font-size(14);
  line-height: 1.1;
  text-transform: uppercase;
}

@mixin interactable-text-decoration {
  text-decoration-thickness: typography.$interactable-text-decoration-thickness;
  text-underline-offset: typography.$interactable-text-decoration-offset;
}

@mixin interacted-text-decoration {
  text-decoration: underline;
  text-decoration-thickness: typography.$interactive-text-decoration-thickness;
  text-underline-offset: typography.$interactable-text-decoration-offset;
}

@mixin heading-generator(
  $font-size-default,
  $font-size-medium,
  $font-size-small,
  $font-size-tiny,
  $line-height
) {
  $small-and-tiny-identical: $font-size-small == $font-size-tiny;
  $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and
    $small-and-tiny-identical;
  $all-identical: $font-size-default == $font-size-medium and
    $medium-small-and-tiny-identical and $small-and-tiny-identical;
  line-height: $line-height;
  @include font-size($font-size-default);

  @if $all-identical != true {
    @if $medium-small-and-tiny-identical != true {
      @include media.on-medium {
        @include font-size($font-size-medium);
      }

      @if $small-and-tiny-identical != true {
        @include media.on-small {
          @include font-size($font-size-small);
        }

        @include media.on-tiny {
          @include font-size($font-size-tiny);
        }
      } @else {
        @include media.on-mobile {
          @include font-size($font-size-small);
        }
      }
    } @else {
      @include media.on-smaller-than-large {
        @include font-size($font-size-medium);
      }
    }
  }
}