//@include triangle within a pseudo element and add positioning properties (ie. top, left)
//$direction: up, down, left, right
@mixin triangle($direction, $size: 6px, $color: inherit){
	content: '';
	display: block;
	position: absolute;
	height: 0; width: 0;
	@if ($direction == 'up'){
		border-bottom: $size solid $color;
		border-left: 1/2*$size solid transparent;
		border-right: 1/2*$size solid transparent;
	}
	@else if ($direction == 'down'){
		border-top: $size solid $color;
		border-left: 1/2*$size solid transparent;
		border-right: 1/2*$size solid transparent;
	}
	@else if ($direction == 'left'){
		border-top: 1/2*$size solid transparent;
		border-bottom: 1/2*$size solid transparent;
		border-right: $size solid $color;
	}
	@else if ($direction == 'right'){
		border-top: 1/2*$size solid transparent;
		border-bottom: 1/2*$size solid transparent;
		border-left: $size solid $color;
	}
}

// A simple method for ensuring that your text element doesn't overflow its container and breaks nicely.
// It takes one parameter, which is any of the valid text-overflow values.
@mixin truncateText($overflow: ellipsis){
	overflow: hidden;
	white-space: nowrap;
	text-overflow: $overflow; // values are: clip, ellipsis, or a string
}

//A simple mixin to add tooltips to elements
@mixin tooltip($content: attr(data-tooltip), $direction: top) {
	position: relative;
	&:before, &:after {
		display: none;
		z-index: 98;
	}
	&:hover {
		&:after { // for text bubble
			content: $content;
			display: block;
			position: absolute;
			height: 12px; // (makes total height including padding 22px)
			padding: 6px;
			font-size: 12px;
			white-space: nowrap;
			color: #fff;
			text-shadow: 1px 1px #000;
			background-color: #222;
		}
		@if ($direction == 'top'){
			&:before {
				@include triangle(down, 6px, #222);
				top: -6px; margin-top: 0;
				left: 47%;
			}
			&:after {
				top: -28px;
				left: 47%; margin-left: -20px;
			}
		}
		@else if ($direction == 'bottom'){
			&:before {
				@include triangle(up, 6px, #222);
				top: auto; margin-top: 0;
				bottom: -6px;
				left: 47%;
			}
			&:after {
				bottom: -28px;
				left: 47%; margin-left: -20px;
			}
		}
	}
}


//Background Gradient
@mixin background-gradient($start-color, $end-color, $orientation) {
	background: $start-color;

	@if $orientation == 'vertical' {
		background: -webkit-linear-gradient(top, $start-color, $end-color);
		background: linear-gradient(to bottom, $start-color, $end-color);
	} @else if $orientation == 'horizontal' {
		background: -webkit-linear-gradient(left, $start-color, $end-color);
		background: linear-gradient(to right, $start-color, $end-color);
	} @else {
		background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
		background: radial-gradient(ellipse at center, $start-color, $end-color);
	}
}

//Center Grid Blocks
@mixin center($columns, $context: $total-columns) {
	width: columns($columns, $context);
	margin: 0 auto;
}