// Flexbox Mixins
// --------------------------------------------------
// http://philipwalton.github.io/solved-by-flexbox/
// https://github.com/philipwalton/solved-by-flexbox

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

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

@mixin flex-direction($value: row) {
  @if $value == row-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
  } @else if $value == column {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
  } @else if $value == column-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
  } @else {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
  }
  -webkit-flex-direction: $value;
  -moz-flex-direction: $value;
  -ms-flex-direction: $value;
  flex-direction: $value;
}

@mixin flex-wrap($value: nowrap) {
  // No Webkit Box fallback.
  -webkit-flex-wrap: $value;
  -moz-flex-wrap: $value;
  @if $value == nowrap {
    -ms-flex-wrap: none;
  } @else {
    -ms-flex-wrap: $value;
  }
  flex-wrap: $value;
}

@mixin flex($fg: 1, $fs: null, $fb: null) {
  -webkit-box-flex: $fg;
  -webkit-flex: $fg $fs $fb;
  -moz-box-flex: $fg;
  -moz-flex: $fg $fs $fb;
  -ms-flex: $fg $fs $fb;
  flex: $fg $fs $fb;
}

@mixin flex-flow($values: (row nowrap)) {
  // No Webkit Box fallback.
  -webkit-flex-flow: $values;
  -moz-flex-flow: $values;
  -ms-flex-flow: $values;
  flex-flow: $values;
}

@mixin align-items($value: stretch) {
  @if $value == flex-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
  } @else if $value == flex-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
  } @else {
    -webkit-box-align: $value;
    -ms-flex-align: $value;
  }
  -webkit-align-items: $value;
  -moz-align-items: $value;
  align-items: $value;
}

@mixin align-self($value: auto) {
  -webkit-align-self: $value;
  -moz-align-self: $value;
  @if $value == flex-start {
    -ms-flex-item-align: start;
  } @else if $value == flex-end {
    -ms-flex-item-align: end;
  } @else {
    -ms-flex-item-align: $value;
  }
  align-self: $value;
}

@mixin align-content($value: stretch) {
  -webkit-align-content: $value;
  -moz-align-content: $value;
  @if $value == flex-start {
    -ms-flex-line-pack: start;
  } @else if $value == flex-end {
    -ms-flex-line-pack: end;
  } @else {
    -ms-flex-line-pack: $value;
  }
  align-content: $value;
}

@mixin justify-content($value: stretch) {
  @if $value == flex-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
  } @else if $value == flex-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
  } @else if $value == space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
  } @else {
    -webkit-box-pack: $value;
    -ms-flex-pack: $value;
  }
  -webkit-justify-content: $value;
  -moz-justify-content: $value;
  justify-content: $value;
}

@mixin flex-order($n) {
  -webkit-order: $n;
  -ms-flex-order: $n;
  order: $n;
  -webkit-box-ordinal-group: $n;
}

@mixin thin-border-before($color, $radius) {
  position: relative;
  &:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-top: 1px solid $color;
    border-left: 1px solid $color;
    border-radius: $radius;
    transform-origin: 0 0;
    z-index: 0;
    box-sizing: border-box;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      height: 200%;
      width: 200%;
      transform: scale(0.5);
      border-radius: ($radius * 2);
    }
  }

  &:after {
    border-top: none;
    border-left: none;
  }
}

@mixin thin-border-after($color, $radius) {
  position: relative;
  &:before {
    border-bottom: none;
    border-right: none;
  }

  &:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-bottom: 1px solid $color;
    border-right: 1px solid $color;
    border-radius: $radius;
    transform-origin: 0 0;
    z-index: 0;
    box-sizing: border-box;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      height: 200%;
      width: 200%;
      transform: scale(0.5);
      border-radius: ($radius * 2);
    }
  }
}

@mixin hairline($position: bottom) {
  content: '';
  position: absolute;
  background-color: #ddd;
  display: block;
  @if $position == left {
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 100%;
    width: 1px;
    transform-origin: 0 50%;
    -webkit-transform-origin: 0 50%;
    transform: scaleX(0.5);
    -webkit-transform: scaleX(0.5);
  } @else if $position == right {
    left: auto;
    top: 0;
    bottom: auto;
    right: 0;
    height: 100%;
    width: 1px;
    transform-origin: 100% 50%;
    -webkit-transform-origin: 100% 50%;
    transform: scaleX(0.5);
    -webkit-transform: scaleX(0.5);
  } @else if $position == top {
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 1px;
    width: 100%;
    transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
  } @else { // $position == bottom
    left: 0;
    top: atuo;
    bottom: 0;
    right: auto;
    height: 1px;
    width: 100%;
    transform-origin: 0% 100%;
    -webkit-transform-origin: 0% 100%;
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
  }
}

// transition
@mixin transition($transition...) {
  -webkit-transition: $transition;
          transition: $transition;
}
@mixin transition-delay($transition-delay) {
  -webkit-transition-delay: $transition-delay;
          transition-delay: $transition-delay;
}
@mixin transition-duration($transition-duration) {
  -webkit-transition-duration: $transition-duration;
          transition-duration: $transition-duration;
}
@mixin transition-duration($transition-duration) {
  -webkit-transition-duration: $transition-duration;
          transition-duration: $transition-duration;
}

@mixin transition-timing-function($transition-timing) {
   -webkit-transition-timing-function: $transition-timing;
           transition-timing-function: $transition-timing;
 }

@mixin transition-property($property) {
  -webkit-transition-property: $property;
          transition-property: $property;
}

// transform
@mixin rotate($degrees) {
  @include transform( rotate($degrees) );
}
@mixin scale($ratio) {
  @include transform( scale($ratio) );
}
@mixin translate($x, $y) {
  @include transform( translate($x, $y) );
}
@mixin skew($x, $y) {
  @include transform( skew($x, $y) );
  -webkit-backface-visibility: hidden;
}
@mixin translate3d($x, $y, $z) {
  @include transform( translate3d($x, $y, $z) );
}
@mixin translateZ($z) {
  @include transform( translateZ($z) );
}
@mixin transform($val) {
  -webkit-transform: $val;
          transform: $val;
}

@mixin transform-origin($left, $top) {
  -webkit-transform-origin: $left $top;
          transform-origin: $left $top;
}