@use 'sass:math';

/**
 * Draws a triangle from the current element.
 *
 * @param    {number}    $width                   Triangle width.
 * @param    {number}    $height                  Triangle height.
 * @param    {string}    $direction               Triangle direction (top|bottom|left|right|bottom-left|bottom-right|top-left|top-right).
 * @param    {color}     $color [currentColor]    Triangle color.
 */
@mixin triangle($width, $height, $direction, $color: currentColor) {
	display: block;
	width: 0;
	height: 0;

	@if ($direction == 'top') {
		border-right: #{math.div($width, 2)} solid transparent;
		border-bottom: #{$height} solid #{$color};
		border-left: #{math.div($width, 2)} solid transparent;
	} @else if ($direction == 'bottom') {
		border-top: #{$height} solid #{$color};
		border-right: #{math.div($width, 2)} solid transparent;
		border-left: #{math.div($width, 2)} solid transparent;
	} @else if ($direction == 'left') {
		border-top: #{math.div($width, 2)} solid transparent;
		border-right: #{$height} solid #{$color};
		border-bottom: #{math.div($width, 2)} solid transparent;
	} @else if ($direction == 'right') {
		border-top: #{math.div($width, 2)} solid transparent;
		border-bottom: #{math.div($width, 2)} solid transparent;
		border-left: #{$height} solid #{$color};
	} @else if ($direction == 'bottom-left') {
		border-right: #{$width} solid transparent;
		border-bottom: #{$height} solid #{$color};
	} @else if ($direction == 'bottom-right') {
		border-bottom: #{$height} solid #{$color};
		border-left: #{$width} solid transparent;
	} @else if ($direction == 'top-left') {
		border-top: #{$height} solid #{$color};
		border-right: #{$width} solid transparent;
	} @else if ($direction == 'top-right') {
		border-top: #{$height} solid #{$color};
		border-left: #{$width} solid transparent;
	}
}