@each $key,
$value in $theme-colors {
    .text-#{$key} {
        color: $value !important;
    }
}

.text-sm {
    font-size: $font-size-base * .875;
}

.text-md {
    font-size: $font-size-base;
}

.text-lg {
    font-size: $font-size-base * 1.25;
}

.text-short{
    overflow: hidden;
}
@for $i from 1 to 4 {
    .text-short-#{$i}{
        @include ellipsis($i)
    }
}

// $font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
// $font-size-lg:                $font-size-base * 1.25 !default;
// $font-size-sm:                $font-size-base * .875 !default;