arrows.scss

@mixin arrow($direction, $color, $size){
  display: block;
  height: 0;
  width: 0;

  @if $direction == 'up' {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
  }

	@else if $direction == 'right' {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
  }

	@else if $direction == 'down' {
    border-top: $size solid $color;
    border-right: $size solid transparent;
    border-left: $size solid transparent;
  }

	@else if $direction == 'left' {
    border-top: $size solid transparent;
    border-right: $size solid $color;
    border-bottom: $size solid transparent;
  }

	@else if $direction == 'up-left' {
    border-top: $size solid $color;
    border-right: $size solid transparent;
  }

	@else if $direction == 'up-right' {
    border-top: $size solid $color;
    border-left: $size solid transparent;
  }

	@else if $direction == 'down-left' {
    border-bottom: $size solid $color;
    border-right: $size solid transparent;
  }

	@else if $direction == 'down-right' {
    border-bottom: $size solid $color;
    border-left: $size solid transparent;
  }
}


@mixin arrow-bordered($direction, $innerSize, $innerColor, $outerColor, $offset) {
	$outerSize: $innerSize + 1;

	position: relative;
	border: 1px solid $outerColor;

	&:before, &:after {
		position: absolute;
	}

	@if $direction == 'up' or $direction == 'down' {
		&:before {
			left: $offset;
			margin-left: -$outerSize;
		}

		&:after {
			left: $offset;
			margin-left: -$innerSize;
		}
	}

	@if $direction == 'up' {
		&:before {
			content: '';
			@include arrow(up, $outerColor, $outerSize);
			top: -($outerSize);
		}

		&:after {
			content: '';
			@include arrow(up, $innerColor, $innerSize);
			top: -$innerSize;
		}
	}

	@if $direction == 'down' {
		&:before {
			content: '';
			@include arrow(down, $outerColor, $outerSize);
			bottom: -($outerSize);
			right: $offset - 1;
		}

		&:after {
			content: '';
			@include arrow(down, $innerColor, $innerSize);
			bottom: -$innerSize;
			right: $offset;
		}
	}

	@if $direction == 'left' or $direction == 'right' {
		&:before {
			top: $offset;
			margin-top: -$outerSize;
		}

		&:after {
			top: $offset;
			margin-top: -$innerSize;
		}
	}

	@if $direction == 'left' {
		&:before {
			content: '';
			@include arrow(left, $outerColor, $outerSize);
			left: -($outerSize);
		}

		&:after {
			content: '';
			@include arrow(left, $innerColor, $innerSize);
			left: -$innerSize;
		}
	}

	@if $direction == 'right' {
		&:before {
			content: '';
			@include arrow(right, $outerColor, $outerSize);
			right: -($outerSize);
		}

		&:after {
			content: '';
			@include arrow(right, $innerColor, $innerSize);
			right: -$innerSize;
		}
	}
}