//-----------------------------------
// Sass Typography Mixins
//-----------------------------------

// Typography - Px to Rem
//--------------
$base-size: $base__font-size;

@function rem($size) {
  $rem-size: $size / $base-size;
  @return #{$rem-size}rem;
}


//-----------------------------------
// NOTE: There are 3 Mixins for each heading tag since there are some use cases
// where a Heading should look like an H4 in mobile but like an H5 in desktop breakpoints.
//-----------------------------------

// H1 Heading - Hero Section
//--------------
@mixin h1-hero--mobile {
  font-size: rem($base__font-size * 4);
  line-height: $base__line-height * .82143;
}

@mixin h1-hero--desktop {
  font-size: rem($base__font-size * 5.5);
  line-height: $base__line-height * .8929;
}

@mixin h1-hero {
  @include h1-hero--mobile;

  @include media-desktop-and-up {
    @include h1-hero--desktop;
  }
}


// H1 Heading
//--------------
@mixin h1--mobile {
  font-size: rem($base__font-size * 2.5);
  font-weight: normal;
  line-height: $base__line-height * .82143;
}

@mixin h1--desktop {
  font-size: rem($base__font-size * 3.5);
  font-weight: normal;
  line-height: $base__line-height * .8929;
}

@mixin h1 {
  @include h1--mobile;

  @include media-desktop-and-up {
    @include h1--desktop;
  }

}


// H2 Heading
//--------------
@mixin h2--mobile {
  font-size: rem($base__font-size * 2);
  line-height: $base__line-height * .82143;
}

@mixin h2--desktop {
  font-size: rem($base__font-size * 3);
  line-height: $base__line-height * .8929;
}

@mixin h2 {
  @include h2--mobile;

  @include media-desktop-and-up {
    @include h2--desktop;
  }
}


// H3 Heading
//--------------
@mixin h3--mobile {
  font-size: rem($base__font-size * 1.8);
  line-height: $base__line-height * .82143;
}

@mixin h3--desktop {
  font-size: rem($base__font-size * 2.5);
  line-height: $base__line-height * .8929;
}

@mixin h3 {
  @include h3--mobile;

  @include media-desktop-and-up {
    @include h3--desktop;
  }
}


// H4 Heading
//--------------
@mixin h4--mobile {
  font-size: rem($base__font-size * 1.6);
  line-height: $base__line-height * .82143;
}

@mixin h4--desktop {
  font-size: rem($base__font-size * 2);
  line-height: $base__line-height * .8929;
}

@mixin h4 {
  @include h4--mobile;

  @include media-desktop-and-up {
    @include h4--desktop;
  }
}


// H5 Heading
//--------------
@mixin h5--mobile {
  font-size: rem($base__font-size * 1.6);
  line-height: $base__line-height * .82143;
}

@mixin h5--desktop {
  font-size: rem($base__font-size * 1.8);
  line-height: $base__line-height * .8929;
}

@mixin h5 {
  @include h5--mobile;

  @include media-desktop-and-up {
    @include h5--desktop;
  }
}


// Body Copy
//--------------
@mixin body-copy--mobile {
  font-size: rem($base__font-size * 1.6);
  font-weight: normal;
  line-height: $base__line-height * .715;
}


@mixin body-copy--desktop {
  font-size: rem($base__font-size * 1.6);
  font-weight: normal;
  line-height: $base__line-height * .8929;
}

@mixin body-copy {
  @include body-copy--mobile;

  @include media-desktop-and-up {
    @include body-copy--desktop;
  }
}


// Body Copy Small
//--------------
@mixin body-copy-small--mobile {
  font-size: rem($base__font-size * 1.4);
  font-weight: normal;
  line-height: $base__line-height * .715;
}

@mixin body-copy-small--desktop {
  font-size: rem($base__font-size * 1.4);
  font-weight: normal;
  line-height: $base__line-height * .8929;
}

@mixin body-copy-small {

  @include body-copy-small--mobile;

  @include media-desktop-and-up {
    @include body-copy-small--desktop;
  }

}


// Eyebrow Large
//--------------
@mixin eyebrow-large--mobile {
  font-size: rem($base__font-size * 1.8);
  line-height: $base__line-height * .8929;
  text-transform: uppercase;
}

@mixin eyebrow-large--desktop {
  font-size: rem($base__font-size * 2.5);
  line-height: $base__line-height * 1;
  text-transform: uppercase;
}

@mixin eyebrow-large {
  font-weight: bold;

  @include eyebrow-large--mobile;

  @include media-desktop-and-up {
    @include eyebrow-large--desktop;
  }
}


// Eyebrow Small
//--------------
@mixin eyebrow-small--mobile {
  font-size: rem($base__font-size * 1.6);
  line-height: $base__line-height * .8929;
  margin-bottom: $spacing__sm * .667;
  text-transform: uppercase;
}

@mixin eyebrow-small--desktop {
  font-size: rem($base__font-size * 2);
  line-height: $base__line-height * 1;
  text-transform: uppercase;
  margin-bottom: $spacing__sm * .667;
}

@mixin eyebrow-small {
  font-weight: bold;

  @include eyebrow-small--mobile;

  @include media-desktop-and-up {
    @include eyebrow-small--desktop;
  }
}