// ------------------------------------
// T4 Utilities & Mixins
// ------------------------------------

//
// Insert Font Awesome Icons
// Default is Angle Right [http://fortawesome.github.io/Font-Awesome/icon/angle-right/]
@mixin icon($icon: "\f105") {
  content: $icon;
  display: inline-block;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
}

//
// Insert Typography Separator
// Default is En Dash [https://www.typewolf.com/cheatsheet]
@mixin separator($sep: "–") {
  content: $sep;
  display: inline-block;
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-style: normal;
}

//
// Vertical Align Anything
// Note: In some case, the Container need Height to working properly
@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


//
// MISC.
// --------------------------------------------------
.star {
  color: $yellow;
}

.red {
  color: $red;
}

// Wrap Element
.wrap {
  width: auto;
  clear: both;
}

// Center
.center,
.table td.center,
.table th.center {
  text-align: center;
}

// Hidden elements
.element-invisible {
  position: absolute;
  padding: 0;
  margin: 0;
  border: 0;
  height: 1px;
  overflow: hidden;
  width: 1px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}