/*--------------------------------------------------------------
# Arrows / Triangles
# example: @include arrow("left", #cccccc, 10);
--------------------------------------------------------------*/

@mixin arrow($direction, $color, $size) {
	$pxSize: $size + px;
	$remSize: ($size / 10) + rem;

	width: 0;
	height: 0;

	@if $direction == "left"{
		border-top: $pxSize solid transparent;
		border-right: $pxSize solid $color;
		border-bottom: $pxSize solid transparent;

		border-top: $remSize solid transparent;
		border-right: $remSize solid $color;
		border-bottom: $remSize solid transparent;
	}@else if $direction == "right"{
		border-top: $pxSize solid transparent;
		border-bottom: $pxSize solid transparent;
		border-left: $pxSize solid $color;

		border-top: $remSize solid transparent;
		border-bottom: $remSize solid transparent;
		border-left: $remSize solid $color;
	}@else if $direction == "up"{
		border-left: $pxSize solid transparent;
		border-right: $pxSize solid transparent;
		border-bottom: $pxSize solid $color;

		border-left: $remSize solid transparent;
		border-right: $remSize solid transparent;
		border-bottom: $remSize solid $color;
	}@else if $direction == "down"{
		border-left: $pxSize solid transparent;
		border-right: $pxSize solid transparent;
		border-top: $pxSize solid $color;

		border-left: $remSize solid transparent;
		border-right: $remSize solid transparent;
		border-top: $remSize solid $color;
	}

}