// ==========================================================================
// Mixins
//
// Available Mixins
//    aimation
//    animation-delay
//    animation-direction
//    animation-duration
//    animation-fill-mode
//    animation-iteration-count
//    animation-name
//    animation-play-state
//    animation-timing-function
//    arrow
//    arrow-lazy
//    background-clip
//    background-origin
//    background-size
//    border-radius
//    border-radius-corner
//    box-shadow
//    box-sizing
//    column
//    column-rule
//    custom-scrollbar
//    gradient
//    keyframes
//    opacity
//    placeholder
//    replace-image
//    retina-background
//    selection
//    text-decoration-color
//    transform
//    transform-origin
//    transition
//
// IE Mixins
//    ie-gradient
//    ie-opacity
// ==========================================================================

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

@mixin animation-delay($delay){
	-webkit-animation-delay: $delay;
	animation-delay: $delay;
}

@mixin animation-direction($direction){
	-webkit-animation-direction: $direction;
	animation-direction: $direction;
}

@mixin animation-duration($duration){
	-webkit-animation-duration: $duration;
	animation-duration: $duration;
}

@mixin animation-fill-mode($fill-mode){
	-webkit-animation-fill-mode: $fill-mode;
	animation-fill-mode: $fill-mode;
}

@mixin animation-iteration-count($iteration-count){
	-webkit-animation-iteration-count: $iteration-count;
	animation-iteration-count: $iteration-count;
}

@mixin animation-name($name){
	-webkit-animation-name: $name;
	animation-name: $name;
}

@mixin animation-play-state($play-state){
	-webkit-animation-play-state: $play-state;
	animation-play-state: $play-state;
}

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

@mixin arrow($size: 10px, $color: #ccc, $direction: top){
	@if $direction == "right" {
		width: 0;
		height: 0;
		border-top: $size solid transparent;
		border-bottom: $size solid transparent;
		border-left: $size solid $color;
	} @else if $direction == "down" {
		width: 0;
		height: 0;
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-top: $size solid $color;
	} @else if $direction == "left" {
		width: 0;
		height: 0;
		border-top: $size solid transparent;
		border-bottom: $size solid transparent; 
		border-right:$size solid $color;
	} @else {
		width: 0;
		height: 0;
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-bottom: $size solid $color;
	}
}

@mixin arrow-lazy($direction: top, $size: 10px, $color: #ccc, $center: 50%, $margin: -1px, $pseudo: before){
	position: relative;
	border-color: $color;

	&:#{$pseudo} {
		position: absolute;
		content: "";
		width: 0;
		height: 0;
		border-color: $color;

		@if $direction == "right" {
			top: $center;
			left: 100%;
			margin-left: $margin;
			margin-top: $size * -1;
			border-top: $size solid transparent;
			border-bottom: $size solid transparent;
			border-left: $size solid $color;
			border-left-color: inherit;
		} @else if $direction == "down" {
			top: 100%;
			left: $center;
			margin-top: $margin;
			margin-left: $size * -1;
			border-left: $size solid transparent;
			border-right: $size solid transparent;
			border-top: $size solid $color;
			border-top-color: inherit;
		} @else if $direction == "left" {
			top: $center;
			right: 100%;
			margin-right: $margin;
			margin-top: $size * -1;
			border-top: $size solid transparent;
			border-bottom: $size solid transparent; 
			border-right:$size solid $color;
			border-right-color: inherit;
		} @else {
			bottom: 100%;
			left: $center;
			margin-bottom: $margin;
			margin-left: $size * -1;
			border-left: $size solid transparent;
			border-right: $size solid transparent;
			border-bottom: $size solid $color;
			border-bottom-color: inherit;
		}
	}
}

@mixin background-clip($clip: padding){
	-webkit-background-clip: #{$clip}-box;
	-moz-background-clip: $clip;
	background-clip: #{$clip}-box;
}

@mixin background-origin($origin: padding-box){
	-moz-background-origin: $origin;
	background-origin: $origin;
}

@mixin background-size($size: cover){
	-moz-background-size: $size; // Firefox 3.6, 
	-o-background-size: $size; // Opera 10 - 10.1
	background-size: $size; // IE9+, Firefox 4+, Chrome 4+, Safari 3.1+ (?), Opera 10.5+
}

@mixin border-radius($radius: 3px){
	-webkit-border-radius: $radius;
	border-radius: $radius;

	// Keeps the background color from leaking outside a border
	@include background-clip();
}

@mixin border-radius-corner($leftRight, $topBottom, $radius: 3px){
	-webkit-border-#{$topBottom}-#{$leftRight}-radius: $radius;
	border-#{$topBottom}-#{$leftRight}-radius: $radius;

	// Keeps the background color from leaking outside a border
	@include background-clip();
}

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

@mixin box-sizing($box: border-box) {
	// Paul Irish box sizing
	-webkit-box-sizing: $box; // Chrome 4 - 9, Safari 3.1 - 5.0
	-moz-box-sizing: $box; // Firefox 2+
	box-sizing: $box; // IE8+, Chrome 10+, Safari 5.1+, Opera 9.5+
}

@mixin column($col-count: 2, $col-gap: 20px){
	// Ignored in ie9 and earlier
	-webkit-column-count: $col-count;
	-moz-column-count: $col-count;
	column-count: $col-count;

	-webkit-column-gap: $col-gap;
	-moz-column-gap: $col-gap;
	column-gap: $col-gap;
}

@mixin column-rule($col-rule-width: 1px, $col-rule-style: solid, $col-rule-color: #ccc){
	// Ignored in ie9 and earlier
	-webkit-column-rule-width: $col-rule-width;
	-moz-column-rule-width: $col-rule-width;
	column-rule-width: $col-rule-width;

	-webkit-column-rule-style: $col-rule-style;
	-moz-column-rule-style: $col-rule-style;
	column-rule-style: $col-rule-style;

	-webkit-column-rule-color: $col-rule-color;
	-moz-column-rule-color: $col-rule-color;
	column-rule-color: $col-rule-color;
}

@mixin custom-scrollbar($width: .8em, $track: rgba(217, 217, 217, .5), $thumb: rgba(184, 184, 184, .5)){
	::-webkit-scrollbar {
		width: $width;
	}
	::-webkit-scrollbar-track {
		background-color: $track;
	}
	::-webkit-scrollbar-thumb {
		background: $thumb;
		@include box-shadow(inset .05em .05em 0 rgba(0, 0, 0, .1), inset 0 -.05em 0 rgba(0, 0, 0, .07));
	}
}

@function em($value, $root: "false") {
    @if $root == "false" {
        @return ($value/$root-font-size * 1em);
    } @else {
        @return ($value/$root * 1em);
    }
}

@mixin epic-sides() {
	// Still testing this one
	position: relative;
	z-index: 1;

	&:before {
		position: absolute;
		content: "";
		display: block;
		top: 0;
		left: -100%;
		height: 100%;
		width: 300%;
		z-index: -1;
		background-color: inherit;
		@content;
	}
}

@mixin gradient($start, $end){
	background-color: $end;
	background-image: -webkit-gradient(linear, left top, left bottom, from($start),to($end));
	background-image: -webkit-linear-gradient(top, $start, $end);
	background-image: -moz-linear-gradient(top, $start, $end);
	background-image: -o-linear-gradient(top, $start, $end);
	background-image: -ms-linear-gradient(top, $start, $end);
	background-image: linear-gradient(top, $start, $end);
}

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

@mixin placeholder() {
	::-webkit-input-placeholder {
		@content;
	}
	:-moz-placeholder { // Firefox 18-
		@content; 
	}
	::-moz-placeholder {  // Firefox 19+
		@content; 
	}
	:-ms-input-placeholder {  
		@content; 
	}
}

@mixin replace-image($url, $width, $height) {
	// I totally stole this idea from Marcel Shields.
	// Read his article: http://css-tricks.com/replace-the-image-in-an-img-with-css/
	display: block;
	width: $width; // Width of new image
	height: $height; // Height of new image
	padding-left: $width; // Equal to width of new image
	background: url($url) no-repeat;
}

@mixin retina-background ($url, $file-type, $width: auto, $repeat: repeat, $ratio: 1.5, $suffix: "@2x") {
	background: url($url + "." + $file-type);
	background-repeat: $repeat;
	// Media queries from http://git.io/k-x0wA
	@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
		only screen and (min--moz-device-pixel-ratio: $ratio),
		only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
		only screen and (min-resolution: #{round($ratio*96)}dpi),
		only screen and (min-resolution: #{$ratio}dppx) {
		background: url($url + $suffix + "." + $file-type);
		background-size: $width auto;
	}
}

@mixin selection($background: #0074c2, $color: #fff, $text-shadow: none ) {
// Remove text-shadow in selection highlight: h5bp.com/i
// These selection declarations have to be separate.
	::-moz-selection {
		background: $background;
		color: $color;
		text-shadow: $text-shadow;
	}
	::selection {
		background: $background;
		color: $color;
		text-shadow: $text-shadow;
	}
}

@mixin text-decoration-color($color) {
	-webkit-text-decoration-color:$color;
	-moz-text-decoration-color:$color;
	text-decoration-color:$color;
}

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

@mixin transform-origin($value) {
	-webkit-transform-origin: $value; // Chrome 4+ Safari 3.1+
	-moz-transform-origin: $value; // Firefox 3.5+
	-o-transform-origin: $value; // Opera 10.5+
	-ms-transform-origin: $value; // IE9+
	transform-origin: $value;
}

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


// ==========================================================================
// IE Mixins
// ==========================================================================

@mixin ie-gradient($start, $end){
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{$start}', EndColorStr='#{$end}');
}

@mixin ie-opacity($opacity: 1){
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity*100})";
	filter: alpha(opacity=$opacity*100);
}