.ui-text {
  // Alignment
  @each $p in left center right {
    &--#{$p} {
      text-align: #{$p};
    }
  }

  &--center-mobile-only {
    text-align: center;

    @include ui-from($ui-bp-tablet) {
      text-align: left;
    }
  }

  &--center-mobile-and-tablet {
    text-align: center;

    @include ui-from($ui-bp-desktop) {
      text-align: left;
    }
  }

  &--center-tablet-and-desktop {
    text-align: left;

    @include ui-from($ui-bp-tablet) {
      text-align: center;
    }
  }

  &--center-desktop-only {
    text-align: left;

    @include ui-from($ui-bp-desktop) {
      text-align: center;
    }
  }

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