.text {
  @include font-style;
  color: $color-brand--two;
  // alternative
  &--alternative {
    @include text--alternative;
    // specific color mappings
    .bg-brand--blue &,
    .bg-brand--turquoise &,
    .bg-brand--red & {
      color: $color-alpha--four-50;
    }

    .bg-brand--yellow & {
      color: $color-alpha--two-70;
    }

    .bg-brand--off-white & {
      color: $color--two-50;
    }
  }

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

  // emphasis
  // chained to add specificity
  &--emphasis.text--emphasis {
    color: $color-brand--one;
    // specific color mappings
    .bg-brand--blue &,
    .bg-brand--red &,
    .bg-brand--turquoise &,
    .bg-brand--yellow & {
      color: $color-brand--two;
    }
  }

  // large
  &--l {
    @include font-style('body--l');
  }

  // small
  &--s {
    @include font-style('body--s');
  }

  // negative
  &--negative {
    color: $color--negative;
  }

  // positive
  &--positive {
    color: $color--positive;
  }

  // colors : text modifiers
  &--blue {
    color: $color-brand--one;
  }

  &--dark-blue {
    color: $color-brand--two;
  }

  &--off-white {
    color: $color-brand--four;
  }

  &--turquoise {
    color: $color-brand--three;
  }

  &--red {
    color: $color-brand--five;
  }

  &--yellow {
    color: $color-brand--six;
  }

  &--white {
    color: $color-brand--four;
  }

  // multi color : first line is different from the rest
  // chained to gain specificity over default header colors
  &--duo-color.text--duo-color {

    // specific color mappings
    .bg-brand--blue &,
    .bg-brand--turquoise &,
    .bg-brand--red &,
    .bg-brand--yellow & {
      color: $color-brand--two;

      &::first-line {
        color: $color-brand--four;
      }
    }

    .bg-brand--dark-blue & {
      color: $color-brand--one;

      &::first-line {
        color: $color-brand--four;
      }
    }

    .bg-brand--off-white & {
      color: $color-brand--two;

      &::first-line {
        color: $color-brand--one;
      }
    }
  }

  // viewport l specific
  @include viewport--l {
    // dark text
    &--dark-from-l {
      color: $color-brand--two;
    }
    // light text
    &--light-from-l {
      color: $color-brand--four;
    }
  }
}

// paragraphs
p {
  @include font-style;
  margin-bottom: $spacing--m;
}


// text ellipsis
.text-ellipsis {
  @include text-ellipsis($display: block);
}


// generate classes based on type sizes list
// outputs .title--xxl, .title--xl, etc.
@each $name, $font in $type-sizes {
  // generate classes
  .#{$name} {
    @include typeset($font);
  }
  // generate placeholders
  %#{$name} {
    @include typeset($font);
  }
}
