.text--title {
  font-size: 1.3rem;
  font-variation-settings: $font-weight--normal;
  line-height: 1.1;
  text-align: center;

  @include breakpoint(large_up) {
    font-size: 1.7rem;
  }

  @include breakpoint(xlarge_up) {
    font-size: 2rem;
  }

  &--stroke {
    -webkit-text-stroke: 1px $neutral-black;
    color: $neutral-white;
    font-family: $font-family--italic;
    font-style: italic;
  }
}

.text--headline {
  color: $font-color--base;
  margin: 0;

  &--1 {
    font-size: 3.6rem;
    font-variation-settings: $font-weight--normal;
    line-height: 1.1;
  }

  &--2 {
    font-size: 2.7rem;
    font-variation-settings: $font-weight--normal;
    line-height: 1.1;
  }

  &--3 {
    font-size: 2.3rem;
    font-variation-settings: $font-weight--normal;
    line-height: 1.1;
  }

  &--4 {
    font-size: 1.6rem;
    font-variation-settings: $font-weight--normal;
    line-height: 1.2;
  }

  &--5 {
    font-size: 1.25rem;
    font-variation-settings: $font-weight--normal;
    line-height: 1.2;
  }

  &--6 {
    font-family: $font-family--italic;
    font-size: 1.2rem;
    font-variation-settings: $font-weight--light;
    line-height: 1.2;
  }

  &--light-italic {
    font-family: $font-family--italic;
    font-variation-settings: $font-weight--light;
  }

  &--bold {
    font-variation-settings: $font-weight--bold;
  }
}

.text--body {
  color: $font-color--base;
  margin: 0;

  &--1 {
    font-size: 1.2rem;
    font-variation-settings: $font-weight--normal;
    line-height: 1.3;
  }

  &--2 {
    font-size: .8rem;
    font-variation-settings: $font-weight--normal;
    line-height: 1.3;
  }

  &--bold {
    font-variation-settings: $font-weight--bold;
  }

  &--medium {
    font-variation-settings: $font-weight--medium;
  }

  &--center {
    text-align: center;
  }

  &--all-caps {
    text-transform: uppercase;
  }
}

.text--display {
  color: $font-color--base;
  margin: 0;

  &--1 {
    @extend .text--display;
    font-size: 12rem;
  }

  &--2 {
    @extend .text--display;
    font-size: 9rem;
  }

  &--3 {
    @extend .text--display;
    font-size: 4rem;
  }

  &--4 {
    @extend .text--display;
    font-size: 3rem;

    @include breakpoint(large_up) {
      font-size: 3.6rem;
    }
  }

  &--5 {
    @extend .text--display;
    font-size: 3rem;
  }

  &--6 {
    @extend .text--display;
    font-size: 2.4rem;
  }

  &--7 {
    @extend .text--display;
    font-size: 1.8rem;
  }

  &--8 {
    @extend .text--display;
    font-size: 1.6rem;
  }

  &--9 {
    @extend .text--display;
    font-size: 1.4rem;
  }

  &--10 {
    @extend .text--display;
    font-size: 1.2rem;
  }

  &--11 {
    @extend .text--display;
    font-size: 1rem;
  }

  &--12 {
    @extend .text--display;
    font-size: 0.9rem;
  }

  &--13 {
    @extend .text--display;
    font-size: 0.8rem;
  }

  &--14 {
    @extend .text--display;
    font-size: 0.7rem;
  }

  &--extra-light {
    font-variation-settings: $font-weight--extra-light;
  }

  &--light {
    font-variation-settings: $font-weight--light;
  }

  &--italic {
    font-family: $font-family--italic;
    font-style: italic;
  }

  &--medium {
    font-variation-settings: $font-weight--medium;
  }

  &--semi-bold {
    font-variation-settings: $font-weight--semi-bold;
  }

  &--bold {
    font-variation-settings: $font-weight--bold;
  }

  &--extra-bold {
    font-variation-settings: $font-weight--extra-bold;
  }

  &--black {
    font-variation-settings: $font-weight--black;
  }

  &--center {
    text-align: center;
  }

  &--no-wrap {
    overflow: hidden;
    white-space: nowrap;
  }

  &--stroke-yellow {
    -webkit-text-stroke: 2px $neutral-black;
    color: $accent-yellow;
  }

  &--stroke-green {
    -webkit-text-stroke: 2px $neutral-black;
    color: $accent-green;
  }

  &--stroke-unset {
    -webkit-text-stroke: 0;
  }
}

.text--weight {
  &--extra-light {
    font-variation-settings: $font-weight--extra-light;
  }

  &--light {
    font-variation-settings: $font-weight--light;
  }

  &--italic {
    font-family: $font-family--italic;
    font-style: italic;
  }

  &--medium {
    font-variation-settings: $font-weight--medium;
  }

  &--semi-bold {
    font-variation-settings: $font-weight--semi-bold;
  }

  &--bold {
    font-variation-settings: $font-weight--bold;
  }

  &--extra-bold {
    font-variation-settings: $font-weight--extra-bold;
  }

  &--black {
    font-variation-settings: $font-weight--black;
  }
}

.text--center {
  text-align: center;
}

.text--all-caps {
  text-transform: uppercase;
}
