// ==========================================================================
// Arrows
//
// Use this to generate most of the code for your CSS arrows.
//
//
// EXAMPLE
//
// .tooltip {
// 	&:before {
// 		@include arrow--up(7px, #333);
// 		left: 50%;
// 		margin-left: -7px;
// 	}
// }
//
// ==========================================================================

@mixin arrow--base(){
	position: absolute;
	content: '';
	width: 0;
	height: 0;
}

@mixin arrow--top($size: 10px, $color: #ccc){
	@include arrow--base;
	bottom: 100%;
	border-left: $size solid transparent;
	border-right: $size solid transparent;
	border-bottom: $size solid $color;
}

@mixin arrow--up($size: 10px, $color: #ccc){
	@include arrow--top($size, $color);
}

@mixin arrow--right($size: 10px, $color: #ccc){
	@include arrow--base;
	left: 100%;
	border-top: $size solid transparent;
	border-bottom: $size solid transparent;
	border-left: $size solid $color;
}

@mixin arrow--bottom($size: 10px, $color: #ccc){
	@include arrow--base;
	top: 100%;
	border-left: $size solid transparent;
	border-right: $size solid transparent;
	border-top: $size solid $color;
}

@mixin arrow--down($size: 10px, $color: #ccc){
	@include arrow--bottom($size, $color);
}

@mixin arrow--left($size: 10px, $color: #ccc){
	@include arrow--base;
	right: 100%;
	border-top: $size solid transparent;
	border-bottom: $size solid transparent;
	border-right:$size solid $color;
}