<pre class="mdl-code">{**
 *
 * The classes are named using the format .text-{align} for xs and text-{size}-{align} for all breakpoints.
 *
 * Where align is one of:
 *
 *    right
 *    left
 *    center
 *
 *}</pre>

<br>

<div class="bg-green text-right">Lorem Ipsum</div>

<hr>

<div class="bg-orange text-center">Lorem Ipsum</div>

<hr>

<div class="bg-red text-left">Lorem Ipsum</div>

<hr>

<pre class="mdl-code">{**
 *
 * The classes are named using the format .text-{transform} for all breakpoints.
 *
 * Where transform is one of:
 *
 *    lowercase
 *    uppercase
 *    capitalize
 *
 *}</pre>

<br>

<div class="text-lowercase">Lorem ipsum</div>

<hr>

<div class="text-uppercase">Lorem ipsum</div>

<hr>

<div class="text-capitalize">Lorem ipsum</div>

<hr>

<pre class="mdl-code">{**
 *
 * The classes are named using the format .text-underline-{property} for all breakpoints.
 *
 * Where property is one of:
 *
 *    never - never underline
 *    on-hover - underline only on hover
 *    remove-on-hover - remove underline on hover
 *
 *}</pre>

<br>

<a href="#" class="text-underline-never">Lorem Ipsum</a>

<hr>

<a href="#" class="text-underline-on-hover">Lorem Ipsum</a>

<hr>

<a href="#" class="text-underline text-underline-remove-on-hover">Lorem Ipsum</a>

.text {

    &-justify {

        text-align: justify;

    }

    &-nowrap {

        white-space: nowrap;

    }

    &-truncate {

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

    }

    @each $breakpoint in map-keys($grid-breakpoints) {

        @include media-breakpoint-up($breakpoint) {

            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

            &#{$infix}-left {

                text-align: left;

            }

            &#{$infix}-right {

                text-align: right;

            }

            &#{$infix}-center {

                text-align: center;

            }

        }

    }

    &-lowercase {

        text-transform: lowercase;

    }

    &-uppercase {

        text-transform: uppercase;

    }

    &-capitalize {

        text-transform: capitalize;

    }

    &-hide {

        @include text-hide();

    }

    &-underline {

        @include text-underline(underline);

        &-never {

            @include text-underline(none);

        }

        &-on-hover {

            @include text-underline(none, underline);

        }

        &-remove-on-hover {

            @include text-underline(underline, none);

        }

    }

}