.text {
  @include font-style;
  color: $color-brand--two;

  // alternative
  &--alternative {
    @include text--alternative;
  }

  // active
  &--active {
    color: returnColorCSSVar('brand-secondary-shade-180');
  }

  // emphasis
  &--emphasis {
    // ! Deprecate
    // specific color mappings

    .bg-brand--blue & {
      color: $color-brand--white;
    }

    .bg-brand--turquoise &,
    .bg-brand--yellow & {
      color: $color-brand--two;
    }

    .bg-brand--red & {
      color: $color--two-180;
    }
  }

  &--emphasis {
    @include text--emphasis;
  }

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

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

  // negative
  &--negative {
    @include text--negative;
  }

  // positive
  &--positive {
    @include text--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--white;
  }

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

  // multi color : first line is different from the rest
  // chained to gain specificity over default header colors
  &--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: returnColorCSSVar('white');
    }
  }
}

// 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);
  }
}