//==================================================
// Utilities.scss
//
// Please use available utilities before attempting
// of adding a new property to your CSS classes.
//
// Index
// -----
// 1) Debugging Utility
// 2) Layout
// 3) Positioning
// 4) Text Alignment
// 5) Text Decoration
// 6) Visilibity
//==================================================


//=========================
// 1) Debugging Utility
//
// Disable = uncomment
// Please disable after work is done
// If styling border, it might be a good idea to disable it
//=========================
*, *:before, *:after {
 // outline: 1px solid green;
}

//=========================
// 2) Layout
//=========================
// Turn element into a flexbox container
.u-flex {
  @include flexbox();
}

.u-contain {
  display: block;
  width: 100%;
  height: 100%;
}

.u-inline       { display: inline }
.u-block        { display: block }
.u-inline-block { display: inline-block }

//=========================
// 3) Positioning
//=========================
.u-pullLeft {
  float: left;
}

.u-pullRight {
  float: right;
}

.u-clearfix:before, .u-clearfix:after {
  display: table;
  content: "";
}
.u-clearfix:after {
  clear: both;
}

.u-center {
  margin-right: auto;
  margin-left: auto;
}

.u-fixed {
  position: fixed;
}

//=========================
// 4) Text Alignment
//=========================
.u-textAlignCenter {
  text-align: center;
}

.u-verticalAlignMiddle {
  vertical-align: middle;
}

//=========================
// 5) Text Decoration
//=========================
.u-hyphenate {
  word-break: break-word;
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-before: 2;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-lines: 2;
}

.u-antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

//=========================
// 6) Visibility
//=========================
// Used for overlaying the entire page
.u-pageOverlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.2);
  z-index: $zIndex-8--overlay;
}

// Used for overlaying everything under the navbar layer
.u-navbarOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: $zIndex-6--navbarOverlay;
}

// Used for hiding things.
// Example: Use with jQuery toggleClass to hide or show element
.u-hide {
    display: none;
}

 // Same like .u-hide but for opacity
.u-opaque {
    opacity: 1;
}

@include bp-small-only {
  .u-hideOnMobile {
    display: none;
  }
}

@include bp-medium-only {
    .u-hideOnTablet {
    display: none;
  }
}

.u-overflowHidden { overflow: hidden }
.u-overflowScroll { overflow: scroll }

.u-textOverflowHidden {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}