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

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

// nowrap | wrap | wrap-reverse
// @include flex-wrap(wrap);
@mixin flex-wrap($value: nowrap) {
    // No webkit/FF box fallback.
    -webkit-flex-wrap: $value;

    @if $value==nowrap {
        -ms-flex-wrap: none;
    }

    @else {
        -ms-flex-wrap: $value;
    }

    flex-wrap: $value;
}

// - applies to: flex containers
// <flex-direction> || <flex-wrap>
@mixin flex-flow($values: (row nowrap)) {
    // No webkit/FF box fallback.
    -webkit-flex-flow: $values;
    -ms-flex-flow: $values;
    flex-flow: $values;
}

// Display order
// - applies to: flex items
// <integer>
@mixin order($int: 0) {
    -webkit-box-ordinal-group: $int + 1;
    -moz-box-ordinal-group: $int + 1;
    -webkit-order: $int;
    -ms-flex-order: $int;
    order: $int;
}

// Flex grow factor
// - applies to: flex items
// <number>
@mixin flex-grow($int: 1) {
    -webkit-box-flex: $int;
    -moz-box-flex: $int;
    -webkit-flex-grow: $int;
    -ms-flex: $int;
    flex-grow: $int;
}

// Flex shrink
// - applies to: flex item shrink factor
// <number> 
@mixin flex-shrink($int: 0) {
    -webkit-flex-shrink: $int;
    -moz-flex-shrink: $int;
    -ms-flex: $int;
    flex-shrink: $int;
}

// Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
// <width> 
@mixin flex-basis($value: auto) {
    -webkit-flex-basis: $value;
    flex-basis: $value;
}

// Axis alignment [justify-content]
// flex-start | flex-end | center | space-between | space-around 
@mixin justify-content($value: flex-start) {
    @if $value==flex-start {
        -webkit-box-pack: start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
    }

    @else if $value==flex-end {
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
    }

    @else if $value==space-between {
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
    }

    @else if $value==space-around {
        -ms-flex-pack: distribute;
    }

    @else {
        -webkit-box-pack: $value;
        -moz-box-pack: $value;
        -ms-flex-pack: $value;
    }

    -webkit-justify-content: $value;
    justify-content: $value;
}

// Cross-axis alignment [ align-items]
// flex-start | flex-end | center | baseline | stretch 
@mixin align-items($value: stretch) {
    @if $value==flex-start {
        -webkit-box-align: start;
        -moz-box-align: start;
        -ms-flex-align: start;
    }

    @else if $value==flex-end {
        -webkit-box-align: end;
        -moz-box-align: end;
        -ms-flex-align: end;
    }

    @else {
        -webkit-box-align: $value;
        -moz-box-align: $value;
        -ms-flex-align: $value;
    }

    -webkit-align-items: $value;
    align-items: $value;
}

// Cross-axis Alignment
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch 
@mixin align-self($value: auto) {
    // No webkit box fallback.
    -webkit-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;
}

// Packing flex lines [align-content]
// flex-start | flex-end | center | space-between | space-around | stretch 
@mixin align-content($value: stretch) {
    // No webkit box fallback.
    -webkit-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;
}

// Flex flow direction [flex-direction]
// row (default) | row-reverse | column | column-reverse
@mixin flex-direction($direction: row) {
    @if $direction==row-reverse {
        -webkit-box-direction: reverse;
        -webkit-box-orient: horizontal;
        -moz-box-direction: reverse;
        -moz-box-orient: horizontal;
    }

    @else if $direction==column {
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        -moz-box-direction: normal;
        -moz-box-orient: vertical;
    }

    @else if $direction==column-reverse {
        -webkit-box-direction: reverse;
        -webkit-box-orient: vertical;
        -moz-box-direction: reverse;
        -moz-box-orient: vertical;
    }

    @else {
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-box-direction: normal;
        -moz-box-orient: horizontal;
    }

    -webkit-flex-direction: $direction;
    -ms-flex-direction: $direction;
    flex-direction: $direction;
}

// Transition
// @include transition(.4s);
@mixin transition($time) {
    -webkit-transition: all $time ease-out 0s;
    -moz-transition: all $time ease-out 0s;
    -ms-transition: all $time ease-out 0s;
    -o-transition: all $time ease-out 0s;
    transition: all $time ease-out 0s;
}

// Transform
@mixin transform($value) {
    -webkit-transform: $value;
    -ms-transform: $value;
    transform: $value;
}

// Translate
@mixin translate ($x, $y) {
    @include transform(translate($x, $y));
}

// TranslateY
@mixin translateY ($y) {
    @include transform(translateY($y));
}

// TranslateY
@mixin translateX ($x) {
    @include transform(translateX($x));
}

// Box shadows
@mixin box-shadow($shadow...) {
    -webkit-box-shadow: $shadow;
    -moz-box-shadow: $shadow;
    box-shadow: $shadow;
}

// Opacity
@mixin opacity($opacity) {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); //IE8
}

// Transition
@mixin border-radius($man) {
    -webkit-border-radius: $man;
    -moz-border-radius: $man;
    border-radius: $man;
}

@mixin background($imgpath, $position: center, $size: cover, $repeat: no-repeat) {
    background: {
        image: url($imgpath);
        position: $position;
        repeat: $repeat;
        size: $size;
    }
}

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

@mixin placeholder {
    &.placeholder {
        @content;
    }

    &:-moz-placeholder {
        @content;
    }

    &::-moz-placeholder {
        @content;
    }

    &::-webkit-input-placeholder {
        @content;
    }
}

@mixin transition($args: all 0.6s ease 0s) {
    -webkit-transition: $args;
    -moz-transition: $args;
    -o-transition: $args;
    transition: $args;
}

@mixin keyframes ($animation-name) {
    @-webkit-keyframes #{$animation-name} {
        @content;
    }

    @-moz-keyframes #{$animation-name} {
        @content;
    }

    @-o-keyframes #{$animation-name} {
        @content;
    }

    @keyframes #{$animation-name} {
        @content;
    }
}