@import "./breakpoints.mixins";
@import "./variables";

@mixin typo-78() {
  font-family: $font-family-sans-serif;
  font-size: 46px;
  font-weight: bold;
  line-height: 1.13em;
  letter-spacing: -0.01em;
  // padding-bottom: 0.45em;

  @include media-breakpoint-up(tablet) {
    font-size: 78px;
    line-height: 1.05;
    // padding-bottom: 0.36em;
  }
}

@mixin typo-62() {
  font-family: $font-family-sans-serif;
  font-size: 40px;
  font-weight: bold;
  line-height: 1.1em;
  letter-spacing: -0.01em;
  // padding-bottom: 0.4em;

  @include media-breakpoint-up(tablet) {
    font-size: 62px;
    line-height: 1.16;
    // padding-bottom: 0.42em;
  }
}

@mixin typo-48() {
  font-family: $font-family-sans-serif;
  font-size: 30px;
  font-weight: bold;
  line-height: 1.13em;
  letter-spacing: -0.01em;
  // padding-bottom: 0.43em;

  @include media-breakpoint-up(tablet) {
    font-size: 54px;
    line-height: 1.13;
    // padding-bottom: 0.38em;
  }
}

@mixin typo-36() {
  font-family: $font-family-sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.17;
  letter-spacing: -0.01em;
  // padding-bottom: 0.46em;

  @include media-breakpoint-up(tablet) {
    font-size: 36px;
    line-height: 1.17;
    // padding-bottom: 0.47em;
  }
}

@mixin typo-28() {
  font-family: $font-family-sans-serif;
  font-size: 20px;
  font-weight: $font-weight-semibold;
  line-height: 1.5em;
  letter-spacing: -0.01em;
  // padding-bottom: 0.8em;

  @include media-breakpoint-up(tablet) {
    font-size: 28px;
    line-height: 1.14;
    // padding-bottom: 0.46em;
  }
}

@mixin typo-28--bold() {
  @include typo-28;
  font-weight: bold;
}

@mixin typo-24() {
  font-family: $font-family-sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5em;
  letter-spacing: 0;
  // padding-bottom: 0.69em;

  @include media-breakpoint-up(tablet) {
    font-size: 24px;
    line-height: 1.2;
    // padding-bottom: 0.54em;
  }
}

@mixin typo-20() {
  font-family: $font-family-sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5em;
  letter-spacing: 0.01em;
  // padding-bottom: 0.69em;

  @include media-breakpoint-up(tablet) {
    font-size: 20px;
    line-height: 1.5;
    // padding-bottom: 0.80em;
  }
}

@mixin typo-18() {
  font-family: $font-family-sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5em;
  letter-spacing: 0.01em;
  // padding-bottom: 0.71em;

  @include media-breakpoint-up(tablet) {
    font-size: 18px;
    line-height: 1.5;
    // padding-bottom: 0.83em;
  }
}

@mixin typo-18--bold() {
  @include typo-18;
  font-weight: bold;
}

@mixin typo-16() {
  font-family: $font-family-sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.5em;
  letter-spacing: 0.02em;
  // padding-bottom: 0.83em;

  @include media-breakpoint-up(tablet) {
    font-size: 16px;
    line-height: 1.5;
    // padding-bottom: 0.69em;
  }
}

@mixin typo-16--semibold() {
  @include typo-16;

  font-weight: $font-weight-semibold;
}

@mixin typo-14() {
  font-family: $font-family-sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.5em;
  letter-spacing: 0.02em;
  // padding-bottom: 0.83em;

  @include media-breakpoint-up(tablet) {
    font-size: 14px;
    line-height: 1.21;
    // padding-bottom: 0.57em;
  }
}

@mixin typo-13() {
  font-family: $font-family-sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0.02em;
  // padding-bottom: 0.83em;

  @include media-breakpoint-up(tablet) {
    font-size: 13px;
    line-height: 1.38;
    // padding-bottom: 0.69em;
  }
}

@mixin typo-78--serif() {
  @include typo-78;

  font-family: $font-family-serif;
  letter-spacing: 0.02em;
}

@mixin typo-62--serif() {
  @include typo-62;

  font-family: $font-family-serif;
  letter-spacing: 0.02em;
}

@mixin typo-48--serif() {
  @include typo-48;

  font-family: $font-family-serif;
  letter-spacing: 0.02em;
}

@mixin typo-36--serif() {
  @include typo-36;

  font-family: $font-family-serif;
  letter-spacing: 0.02em;
}

%typo-78 {
  @include typo-78;
}

%typo-62 {
  @include typo-62;
}

%typo-48 {
  @include typo-48;
}

%typo-36 {
  @include typo-36;
}

%typo-28 {
  @include typo-28;
}

%typo-28--bold {
  @include typo-28--bold;
}

%typo-24 {
  @include typo-24;
}

%typo-20 {
  @include typo-20;
}

%typo-18 {
  @include typo-18;
}

%typo-18--bold {
  @include typo-18--bold;
}

%typo-16 {
  @include typo-16;
}

%typo-16--semibold {
  @include typo-16--semibold;
}

%typo-14 {
  @include typo-14;
}

%typo-13 {
  @include typo-13;
}

%typo-78--serif {
  @include typo-78--serif;
}

%typo-62--serif {
  @include typo-62--serif;
}

%typo-48--serif {
  @include typo-48--serif;
}

%typo-36--serif {
  @include typo-36--serif;
}