// Typography

//#region Elements
.desktop {

  h1,
  h2,
  h3,
  h4 {
    font-weight: $bz-font-weight-semibold;
  }

  h1 {
    font-size: $bz-font-size-display;
    line-height: 1.25;
    margin-bottom: $bz-space-stack-s;
  }

  h2 {
    font-size: $bz-font-size-heading;
    line-height: 1.25;
    margin-bottom: $bz-space-stack-s;
  }

  h3 {
    font-size: $bz-font-size-title;
    line-height: 1.25;
    margin-bottom: $bz-space-stack-s;
  }

  h4 {
    font-size: $bz-font-size-subheading;
    font-weight: $bz-font-weight-regular;
    line-height: 1.25;
    margin-bottom: $bz-space-stack-s;
  }

  h5 {
    font-size: $bz-font-size-body;
    font-weight: $bz-font-weight-regular;
    line-height: 1.5;
  }

  p {
    margin-bottom: $bz-space-stack-l;
  }

  strong {
    font-weight: $bz-font-weight-semibold;
  }

}
//#endregion

//#region Modifiers
.bz-font-size {
  font-size: $bz-font-size-body;

  &--caption {
    font-size: $bz-font-size-caption;
  }

  &--body-small {
    font-size: $bz-font-size-body-small;
  }

  &--body {
    font-size: $bz-font-size-body;
  }

  &--subheading {
    font-size: $bz-font-size-subheading;
  }

  &--title {
    font-size: $bz-font-size-title;
  }

  &--heading {
    font-size: $bz-font-size-heading;
  }

  &--display {
    font-size: $bz-font-size-display;
  }

}

.bz-font-weight {
  &--light {
    font-weight: $bz-font-weight-semibold;
  }

  &--regular {
    font-weight: $bz-font-weight-regular;
  }

  &--semibold {
    font-weight: $bz-font-weight-semibold;
  }
}

.bz-font-style {
  &--italic {
    font-style: italic;
    font-weight: $bz-font-weight-regular;
  }
}
//#endregion