@import 'colors';

@import url(https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap);

$font-family-serif: Lora, Georgia, serif;
$font-family-sans-serif: 'PolicyGenius', Arial, sans-serif;

$main-font-color:             color('neutral-2');
$label-font-color:            color('neutral-4');

$lightweight:                 300;
$regularweight:               normal;
$semiboldweight:              600;
$mediumweight:                bold;
$boldweight:                  900;


// Base Font Mixins
@mixin font-family-a() {
  font-family: $font-family-sans-serif;
  font-weight: $boldweight;
  margin: 0;
}

@mixin font-family-b() {
  font-family: $font-family-serif;
  font-weight: $regularweight;
  margin: 0;
}

@mixin font-family-c() {
  font-family: $font-family-serif;
  margin: 0;
}

//TODO: Remove this old typography file
@import './old_typography';

// Font A
@mixin typography-a-1-bold() {
  @include font-family-a;
  font-size: rem-calc(56px);
  line-height: rem-calc(64px);
}

@mixin typography-a-2-bold() {
  @include typography-a-1-bold();
}

@mixin typography-a-3-bold() {
  @include font-family-a;
  font-size: rem-calc(40px);
  line-height: rem-calc(48px);
}

@mixin typography-a-4-bold() {
  @include font-family-a;
  font-size: rem-calc(32px);
  line-height: rem-calc(40px);
}

@mixin typography-a-5-bold() {
  @include font-family-a;
  font-size: rem-calc(24px);
  line-height: rem-calc(32px);
}

@mixin typography-a-6-bold() {
  @include font-family-a;
  font-size: rem-calc(20px);
  line-height: rem-calc(28px);
}

@mixin typography-a-7-bold() {
  @include typography-a-6-bold();
}

@mixin typography-a-8-bold() {
  @include font-family-a;
  font-size: rem-calc(16px);
  line-height: rem-calc(28px);
}

@mixin typography-a-9-bold() {
  @include typography-a-8-bold();
}

@mixin typography-a-10-bold() {
  @include font-family-a;
  font-size: rem-calc(14px);
  line-height: rem-calc(24px);
}

@mixin typography-a-11-bold() {
  @include font-family-a;
  font-size: rem-calc(12px);
  line-height: rem-calc(20px);
}

// Font B
@mixin typography-b-5($bold: false) {
  @include font-family-b;
  font-size: rem-calc(24px);
  font-weight: typography-b-weight($bold);
  line-height: rem-calc(32px);
}

@mixin typography-b-6($bold: false) {
  @include typography-b-5($bold);
}

@mixin typography-b-7($bold: false) {
  @include font-family-b;
  font-size: rem-calc(20px);
  font-weight: typography-b-weight($bold);
  line-height: rem-calc(28px);
}

@mixin typography-b-8($bold: false) {
  @include font-family-b;
  font-size: rem-calc(16px);
  font-weight: typography-b-weight($bold);
  line-height: rem-calc(28px);
}

@mixin typography-b-10($bold: false) {
  @include font-family-b;
  font-size: rem-calc(14px);
  font-weight: typography-b-weight($bold);
  line-height: rem-calc(24px);
}

@mixin typography-b-12($bold: false) {
  @include font-family-b;
  font-size: rem-calc(12px);
  font-weight: typography-b-weight($bold);
  line-height: rem-calc(20px);
  letter-spacing: 0.1px;
}

@mixin typography-c-7-regular() {
  @include font-family-c;
  font-size: rem-calc(19px);
  line-height: rem-calc(35px);
  font-weight: $regularweight;
}

@function typography-b-weight($bold: false) {
  @if $bold {
    @return #{$mediumweight};
  }

  @return #{$regularweight};
}

// TODO: Make this less confusing
@mixin typography-a($number) {
  @if $number == 1 {
    @include typography-a-3-bold();

    @media #{$tablet} {
      @include typography-a-2-bold();
    }

    @media #{$desktop} {
      @include typography-a-1-bold();
    }
  }
  @if $number == 2 {
    @include typography-a-4-bold();

    @media #{$tablet} {
      @include typography-a-3-bold();
    }

    @media #{$desktop} {
      @include typography-a-2-bold();
    }
  }
  @if $number == 3 {
    @include typography-a-4-bold();

    @media #{$tablet} {
      @include typography-a-3-bold();
    }
  }
  @if $number == 4 {
    @include typography-a-6-bold();

    @media #{$tablet} {
      @include typography-a-5-bold();
    }

    @media #{$desktop} {
      @include typography-a-4-bold();
    }
  }
  @if $number == 5 {
    @include typography-a-6-bold();

    @media #{$tablet} {
      @include typography-a-5-bold();
    }
  }
  @if $number == 6 {
    @include typography-a-7-bold();

    @media #{$tablet} {
      @include typography-a-6-bold();
    }
  }
  @if $number == 7 {
    @include typography-a-7-bold();
  }
  @if $number == 8 {
    @include typography-a-8-bold();
  }
  @if $number == 9 {
    @include typography-a-9-bold();
  }
  @if $number == 10 {
    @include typography-a-10-bold();
  }
  @if $number == 11 {
    @include typography-a-11-bold();
  }
}

@mixin typography-b($number) {
  @if $number == 5 {
    @include typography-b-6();

    @media #{$tablet} {
      @include typography-b-5();
    }
  }
  @if $number == 6 {
    @include typography-b-7();

    @media #{$tablet} {
      @include typography-b-6();
    }
  }
  @if $number == 7 {
    @include typography-b-8();

    @media #{$tablet} {
      @include typography-b-7();
    }
  }
  @if $number == 8 {
    @include typography-b-8();
  }
  @if $number == 9 {
    @include typography-b-8();
  }
  @if $number == 10 {
    @include typography-b-10();
  }
  @if $number == 11 {
    @include typography-b-10();
  }
  @if $number == 12 {
    @include typography-b-12();
  }
}

@mixin typography-c() {
  @include typography-c-7-regular();
}

@mixin typography-label {
  @include typography-a-8-bold();
}

@mixin fineprint {
  font-size: rem-calc(11px);
  line-height: rem-calc(15px);
  margin-bottom: 0;
}