@mixin css3-prefix($property, $value) {
    -webkit-#{$property}: #{$value};
    -khtml-#{$property}: #{$value};
    -moz-#{$property}: #{$value};
    -ms-#{$property}: #{$value};
    -o-#{$property}: #{$value};
    #{$property}: #{$value};
}

/**
To quickly centre a block element without having to worry about if there is any 
top or bottom margin already applied
*/
@mixin push-auto {
    margin: {
        left: auto;
        right: auto;
    }
}
/**
When using ::before and ::after you'll always need these three, 
so we're saving two lines of code every time you use this.

Example:
div::after {
    @include pseudo;
    top: -1rem;
    left: -1rem;
    width: 1rem;
    height: 1rem;
}
*/
@mixin pseudo($display: block, $pos: absolute, $content: '') {
    content: $content;
    display: $display;
    position: $pos;
}
/**
Css triangle
This mixin takes all the hassle out of creating that triangle you'll see coming out of 
most traditional tooltips, all without images, you just specify it's colour,
how big you want it,
the direction it's going to come out of your element and you're done !
*/
@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false) {
    @include pseudo($pos: $position);
    width: 0;
    height: 0;
    @if $round {
        border-radius: 3px;
    }
    @if $direction==down {
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-top: $size solid $color;
        margin-top: 0 - round( $size / 2.5);
    }
    @else if $direction==up {
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-bottom: $size solid $color;
        margin-bottom: 0 - round( $size / 2.5);
    }
    @else if $direction==right {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-left: $size solid $color;
        margin-right: -$size;
    }
    @else if $direction==left {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-right: $size solid $color;
        margin-left: -$size;
    }
}

/**
Placeholders
Example:
input,
textarea {
    @include input-placeholder {
        color: $grey;
    }
}
*/
@mixin input-placeholder {
    &.placeholder {
        @content;
    }
    &:-moz-placeholder {
        @content;
    }
    &::-moz-placeholder {
        @content;
    }
    &:-ms-input-placeholder {
        @content;
    }
    &::-webkit-input-placeholder {
        @content;
    }
}

/**
Media queries
Example:
.site-header {
    padding: 2rem;
    font-size: 1.8rem;
    @include mq('tablet-wide') {
        padding-top: 4rem;
        font-size: 2.4rem;
    }
}
*/
@mixin mq($width, $type: min) {
    @if map_has_key($breakpoints, $width) {
        $width: map_get($breakpoints, $width);
        @if $type==max {
            $width: $width - 1px;
        }
        @media only screen and (#{$type}-width: $width) {
            @content;
        }
    }
}

/**
Border Radius
*/
@mixin border-radius($radius: 5px) {
    @include css3-prefix('border-radius', $radius);
}

@mixin border-radius-separate($topLeftRadius: 5px, $topRightRadius: 5px, $bottomLeftRadius: 5px, $bottomRightRadius: 5px) {
    -webkit-border-top-left-radius: $topLeftRadius;
    -webkit-border-top-right-radius: $topRightRadius;
    -webkit-border-bottom-right-radius: $bottomRightRadius;
    -webkit-border-bottom-left-radius: $bottomLeftRadius;

    -moz-border-radius-topleft: $topLeftRadius;
    -moz-border-radius-topright: $topRightRadius;
    -moz-border-radius-bottomright: $bottomRightRadius;
    -moz-border-radius-bottomleft: $bottomLeftRadius;

    border-top-left-radius: $topLeftRadius;
    border-top-right-radius: $topRightRadius;
    border-bottom-right-radius: $bottomRightRadius;
    border-bottom-left-radius: $bottomLeftRadius;
}

/**
Box Shadow
*/
@mixin box-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0, 0, 0, .4), $inset: "") {
    @if ($inset !="") {
        @include css3-prefix('box-shadow', $inset $x $y $blur $color);
    }
    @else {
        @include css3-prefix('box-shadow', $x $y $blur $color);
    }
}

/**
Box Sizing
*/
@mixin box-sizing($type: border-box) {
    @include css3-prefix('box-sizing', $type);
}

/**
Font Face
@param {Font} $fontFamily [myFont] - Font Family
@param {String} $eotFileSrc ['myFont.eot'] - Eot File Source
@param {String} $woffFileSrc ['myFont.woff'] - Woff File Source
@param {String} $ttfFileSrc ['myFont.ttf'] - Ttf File Source
@param {String} $svgFileSrc ['myFont.svg'] - Svg File Source
*/
@mixin font-face($fontFamily: myFont, $eotFileSrc: 'myFont.eot', $woffFileSrc: 'myFont.woff', $ttfFileSrc: 'myFont.ttf', $svgFileSrc: 'myFont.svg', $svgFontID: '#myFont') {
    font-family: $fontFamily;
    src: url($eotFileSrc) format('eot'), url($woffFileSrc) format('woff'), url($ttfFileSrc) format('truetype'), url($svgFileSrc + $svgFontID) format('svg');
}

@mixin transition($element: all, $duration: 300ms, $function: ease-in-out) {
    -webkit-transition: $element $duration $function;
    -moz-transition: $element $duration $function;
    -ms-transition: $element $duration $function;
    -o-transition: $element $duration $function;
    transition: $element $duration $function;
}

@mixin vertical-center(){
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    @include css3-prefix(transform, translateY(-50%));
}

@mixin clearfix {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}