@mixin horizontal-center {
    margin: 0 auto;
}

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

%box-sizing {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

@mixin clearfix {
    &:after {
        clear: both;
        content: '.';
        display: block;
        height: 0;
        line-height: 0;
        overflow: hidden;
    }
    *height: 1%;
}

@mixin border($borderWidth:1px,$borderColor:#d9d9d9,$borderStyle:solid) {
    border: $borderWidth $borderColor $borderStyle;
}

@mixin boxSizing($box:border-box) {
    box-sizing: $box;
    -moz-box-sizing: $box;
    -webkit-box-sizing: $box;
}

@mixin verticalCenter($height:30px) {
    height: $height;
    line-height: $height;
}

@mixin transform($transforms) {
    -moz-transform: $transforms;
    -o-transform: $transforms;
    -ms-transform: $transforms;
    -webkit-transform: $transforms;
    transform: $transforms;
}

@mixin transition($args...) {
    -webkit-transition: $args;
    -moz-transition: $args;
    -ms-transition: $args;
    -o-transition: $args;
    transition: $args;
}

@mixin animation($args...) {
    -webkit-animation: $args;
    -moz-animation: $args;
    -ms-animation: $args;
    -o-animation: $args;
    animation: $args;
}

// rotate
@mixin rotate($deg) {
    @include transform(rotate(#{$deg}deg));
}

@mixin float($float:left) {
    float: $float;
}

@mixin textCenter {
    @include flexBox;
    @include justify-content(center);
    @include align-items(center);
}

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
    -webkit-box-shadow: $top $left $blur $color #{$inset};
    -moz-box-shadow: $top $left $blur $color #{$inset};
    box-shadow: $top $left $blur $color #{$inset};
}

