.u-truncate {
  width: 90% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

.u-hide {
  display: none !important;
}

.u-invisible {
  visibility: hidden !important;
}

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

.u-display-text-pre-wrap {
  white-space: pre-wrap !important;
}

.u-full-height {
  height: 100% !important;
}

.u-full-width {
  width: 100% !important;
}

.u-margin-center-vertical {
  margin: 0 auto !important;
}

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

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

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

.u-text-align-justify {
  text-align: justify !important;
}

$temp-size: 0;

@while $temp-size <= 100 {
  .u-margin-#{$temp-size} {
    margin: #{$temp-size}px !important;
  }

  .u-margin-top-#{$temp-size} {
    margin-top: #{$temp-size}px !important;
  }

  .u-margin-right-#{$temp-size} {
    margin-right: #{$temp-size}px !important;
  }

  .u-margin-bottom-#{$temp-size} {
    margin-bottom: #{$temp-size}px !important;
  }

  .u-margin-left-#{$temp-size} {
    margin-left: #{$temp-size}px !important;
  }

  .u-padding-#{$temp-size} {
    padding: #{$temp-size}px !important;
  }

  .u-padding-top-#{$temp-size} {
    padding-top: #{$temp-size}px !important;
  }

  .u-padding-right-#{$temp-size} {
    padding-right: #{$temp-size}px !important;
  }

  .u-padding-bottom-#{$temp-size} {
    padding-bottom: #{$temp-size}px !important;
  }

  .u-padding-left-#{$temp-size} {
    padding-left: #{$temp-size}px !important;
  }

  $temp-size: $temp-size + 4;
}

//TODO: need grid in place to enable these
// @media #{$small-screen-only-media-query} {
//   .u-hide-small {
//     display: none !important;
//   }
// }

// @media #{$medium-screen-only-media-query} {
//   .u-hide-medium {
//     display: none !important;
//   }
// }

// @media #{$large-screen-only-media-query} {
//   .u-hide-large {
//     display: none !important;
//   }
// }

// @media #{$extra-large-screen-media-query} {
//   .u-hide-extra-large {
//     display: none !important;
//   }
// }