// text mixins

@mixin text-hide() {
  font: "0/0";
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

@mixin text-overflow() {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

// Positions
@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

// Flex

@mixin flex() {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

@mixin flex-direction($direction) {
  -webkit-box-flex-direction: $direction;
  -moz-box-flex-direction:    $direction;
  -webkit-flex-direction:     $direction;
  -ms-flex-direction:         $direction;
  flex-direction:             $direction;
}

@mixin flex-flow($direction, $wrap) {
  @include flex-direction($direction);
  flex-wrap: $wrap;
}

@mixin flex-flow-row-wrap() {
  @include flex();
  @include flex-flow(row, wrap);
}

@mixin flex-element($grow, $shrink, $initialSize: auto) {
  -webkit-box-flex: $grow $shrink $initialSize;
  -moz-box-flex: $grow $shrink $initialSize;
  -webkit-flex: $grow $shrink $initialSize;
  -ms-flex: $grow $shrink $initialSize;
  flex: $grow $shrink $initialSize;
}

@mixin flex-fixed() {
  @include flex-element(0, 0, auto);
}

@mixin flex-var() {
  @include flex-element(1, 1, auto);
}

@mixin flex-grow() {
  @include flex-element(1, 0, auto);
}

@mixin flex-shrink() {
  @include flex-element(0, 1, auto);
}

@mixin flex-vertical-content($value) {
  -webkit-box-align:   $value;
  -moz-box-align:      $value;
  -webkit-align-items: $value;
  -ms-flex-align:      $value;
  align-items:         $value;
}

@mixin flex-vertical-center() {
  @include flex-vertical-content(center);
}

@mixin flex-justify-content($value, $oldValue) {
  -webkit-box-pack:        $value;
  -moz-box-pack:           $value;
  -webkit-justify-content: $oldValue;
  -ms-flex-pack:           $value;
  justify-content:         $oldValue;
}