@use "vars";

@mixin font-bold() {
  font-family: var(--font-bold);
  font-weight: normal;

  em {
    font-family: var(--font-bold-italic);
  }
}

@mixin font-medium() {
  font-family: var(--font-medium);

  em {
    font-family: var(--font-medium-italic);
  }
}

@mixin h1() {
  font-size: var(--h1-size);
  line-height: 1.33;
  letter-spacing: var(--letter-space-5);
  @include font-bold();

  @media (max-width: vars.$width-tablet-1) {
    font-size: var(--h2-size);
  }

  @media (max-width: vars.$width-tablet-2) {
    font-size: var(--h3-size);
  }

  @media (max-width: vars.$width-mobile) {
    font-size: var(--h4-size);
  }
}

@mixin h2() {
  font-size: var(--h2-size);
  line-height: 1.35;
  letter-spacing: var(--letter-space-5);
  @include font-bold();

  @media (max-width: vars.$width-tablet-1) {
    font-size: var(--h3-size);
  }

  @media (max-width: vars.$width-tablet-2) {
    font-size: var(--h4-size);
  }

  @media (max-width: vars.$width-mobile) {
    font-size: var(--h5-size);
  }
}

@mixin h3() {
  font-size: var(--h3-size);
  line-height: 1.33;
  letter-spacing: var(--letter-space-4);
  @include font-bold();

  @media (max-width: vars.$width-tablet-1) {
    font-size: var(--h4-size);
  }

  @media (max-width: vars.$width-tablet-2) {
    font-size: var(--h5-size);
  }

  @media (max-width: vars.$width-mobile) {
    font-size: var(--h6-size);
  }
}

@mixin h4() {
  font-size: var(--h4-size);
  line-height: 1.5;
  letter-spacing: var(--letter-space-3);
  @include font-medium();

  @media (max-width: vars.$width-tablet-1) {
    font-size: var(--h5-size);
  }

  @media (max-width: vars.$width-tablet-2) {
    font-size: var(--h6-size);
  }

  @media (max-width: vars.$width-mobile) {
    font-size: var(--p-size);
  }
}

@mixin h5() {
  font-size: var(--h5-size);
  line-height: 1.67;
  letter-spacing: var(--letter-space-2);
  @include font-medium();

  @media (max-width: vars.$width-tablet-1) {
    font-size: var(--h6-size);
  }

  @media (max-width: vars.$width-tablet-2) {
    font-size: var(--p-size);
  }
}

@mixin h6() {
  font-size: var(--h6-size);
  line-height: 1.8;
  letter-spacing: var(--letter-space-2);
  @include font-medium();

  @media (max-width: vars.$width-tablet-1) {
    font-size: var(--p-size);
  }

  @media (max-width: vars.$width-tablet-2) {
    font-size: var(--m-size);
  }
}

@mixin p() {
  font-size: var(--p-size);
  line-height: 1.9;

  @media (max-width: vars.$width-tablet-2) {
    font-size: var(--m-size);
  }

  @media (max-width: vars.$width-mobile) {
    font-size: var(--ms-size);
  }
}

@mixin m() {
  font-size: var(--m-size);
  line-height: 1.9;

  @media (max-width: vars.$width-tablet-1) {
    font-size: var(--ms-size);
  }
}

@mixin ms() {
  font-size: var(--ms-size);
  line-height: 2;
}

@mixin mxs() {
  font-size: var(--mxs-size);
  line-height: 2;
}