@import "../config/index.scss";

/**
 * Horizontal text alignment
 */

.u-textCenter {
  text-align: center !important;
}

.u-textLeft {
  text-align: left !important;
}

.u-textRight {
  text-align: right !important;
}

/**
 * Prevent whitespace wrapping
 */

.u-textNoWrap {
  white-space: nowrap !important;
}

/**
 * Text ellipsis
 */

.u-textEllipsis {
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}


/**
 * Font size utilities
 */

$fontSizes: (
  'Xs': $tu-xsmall-fontSize,
  'Sm': $tu-small-fontSize,
  'Md': $tu-base-fontSize,
  'Lg': $tu-large-fontSize,
  'Xl': $tu-xlarge-fontSize,
  'Xxl': $tu-xxlarge-fontSize
);

@each $name, $value in $fontSizes {
 .u-fontSize#{$name} {
   font-size: #{$value} !important;
 }
}

/**
 * Font weight utilities
 */

.u-textNormal {
  font-weight: $tu-base-fontWeight !important;
}

.u-textSemiBold {
  font-weight: $tu-semibold-fontWeight !important;
}

.u-textBold {
  font-weight: $tu-bold-fontWeight !important;
}

/**
 * Text Decoration utilities
 */

.u-textUnderline {
  text-decoration: underline !important;
}

.u-textLineThrough {
  text-decoration: line-through !important;
}

.u-textDecorationNone {
  text-decoration: none !important;
}

@if $responsive == true {
  @each $bp-name, $bp-value in $breakpoints {
    @media (min-width: $bp-value) {

      @each $name, $value in $fontSizes {
       .u-#{$bp-name}-fontSize#{$name} {
         font-size: #{$value} !important;
       }
      }

      .u-#{$bp-name}-textCenter {
        text-align: center !important;
      }

      .u-#{$bp-name}-textLeft {
        text-align: left !important;
      }

      .u-#{$bp-name}-textRight {
        text-align: right !important;
      }

      .u-#{$bp-name}-textUnderline {
        text-decoration: underline !important;
      }

      .u-#{$bp-name}-textLineThrough {
        text-decoration: line-through !important;
      }

      .u-#{$bp-name}-textDecorationNone {
        text-decoration: none !important;
      }

      .u-#{$bp-name}-textNoWrap {
        white-space: nowrap !important;
      }

      .u-#{$bp-name}-textEllipsis {
        text-overflow: ellipsis !important;
        overflow: hidden !important;
      }

      .u-#{$bp-name}-textNormal {
        font-weight: $tu-base-fontWeight !important;
      }

      .u-#{$bp-name}-textSemiBold {
        font-weight: $tu-semibold-fontWeight !important;
      }

      .u-#{$bp-name}-textBold {
        font-weight: $tu-bold-fontWeight !important;
      }
    }
  }
}