.ui-text {
  &__h1,
  &__h2,
  &__h3,
  &__h4,
  &__h5,
  &__h6,
  &__display {
    color: $ui-headings-color-br;
    font-weight: 500;
    font-family: $ui-font-specter-bold;
    letter-spacing: -0.5px;
  }

  &__lead {
    color: ui-color('paper-ink-medium');
    font-weight: $ui-lead-font-weight;
    font-size: $ui-lead-font-size;
    font-family: $ui-font-specter-medium;
  }

  &__display {
    @each $size in xl lg md sm {
      &--#{$size} {
        font-size: map-get($ui-display, '#{$size}-font-size');
        line-height: map-get($ui-display, '#{$size}-line-height');
      }
    }
  }

  &, // This captures the base .ui-text class
  &--md {
    font-size: map-get($ui-body, base-font-size);
    line-height: map-get($ui-body, base-line-height);
  }

  &--sm {
    font-size: map-get($ui-body, sm-font-size);
    line-height: map-get($ui-body, sm-line-height);
  }

  &--xs {
    font-size: map-get($ui-body, xs-font-size);
    line-height: map-get($ui-body, xs-line-height);
  }

  &--lg {
    font-size: map-get($ui-body, lg-font-size);
    line-height: map-get($ui-body, lg-line-height);
  }

  @include ui-to($ui-bp-tablet) {
    &--md-mobile {
      font-size: map-get($ui-body, base-font-size);
      line-height: map-get($ui-body, base-line-height);
    }

    &--sm-mobile {
      font-size: map-get($ui-body, sm-font-size);
      line-height: map-get($ui-body, sm-line-height);
    }

    &--lg-mobile {
      font-size: map-get($ui-body, lg-font-size);
      line-height: map-get($ui-body, lg-line-height);
    }
  }

  // How do I select by tag when nesting sass elements!?
  @at-root strong.ui-text__label,
    b.ui-text__label {
    font-family: $ui-font-specter-bold;
  }

  &__label {
    display: block;

    color: $ui-headings-color-br;

    font-weight: 100;
    font-family: $ui-font-specter-medium;
    letter-spacing: 0;

    &--xl {
      font-size: map-get($ui-label, xl-font-size);
      line-height: map-get($ui-label, xl-line-height);
    }

    &--lg {
      font-size: map-get($ui-label, lg-font-size);
      line-height: map-get($ui-label, lg-line-height);
    }

    &--md {
      font-size: map-get($ui-label, md-font-size);
      line-height: map-get($ui-label, md-line-height);
    }

    &--sm {
      font-size: map-get($ui-label, sm-font-size);
      line-height: map-get($ui-label, sm-line-height);
    }

    &--lowercase {
      text-transform: lowercase;
    }
  }

  &--color-inherit {
    color: inherit;
  }

  // Headers
  @for $i from 1 through 6 {
    &__h#{$i} {
      font-size: map-get($ui-headers-mobile-br, 'h#{$i}-font-size');
      line-height: map-get($ui-headers-mobile-br, 'h#{$i}-line-height');
    }
  }

  // Heads Tablet and Up
  @include ui-from($ui-bp-tablet) {
    @for $i from 1 through 6 {
      &__h#{$i} {
        font-size: map-get($ui-headers-br, 'h#{$i}-font-size');
        line-height: map-get($ui-headers-br, 'h#{$i}-line-height');
      }
    }
  }
}