.text {
  @include font-style;
  color: $color-brand--two;
  // alternative
  &--alternative {
    @include text--alternative;
  }

  &--active {
    color: $color-brand--two;
  }

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

  // emphasis
  // chained to add specificity // ? Say whut??
  &--emphasis.text--emphasis {
    color: $color-brand--one;
    // specific color mappings
    .bg-brand--gradient-orange &,
    .bg-brand--blue &,
    .bg-brand--gradient-blue & {
      color: $color-brand--two;
    }

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

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

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

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

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

  // viewport l specific
  @include viewport--l {
    // dark text
    &--dark-from-l {
      color: $color-brand--two;
    }
    // light text
    &--light-from-l {
      color: $color-brand--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);
  }
}