/**
 * Draws a triangle from the current element.
 *
 * @param    {number}    $inline-size             Triangle inline size.
 * @param    {number}    $block-size              Triangle block size.
 * @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($inline-size, $block-size, $direction, $color: currentColor) {
	$clip-path: null;

	@if ($direction == 'top') {
		$clip-path: polygon(50% 0, 100% 100%, 0 100%);
	} @else if ($direction == 'bottom') {
		$clip-path: polygon(0 0, 100% 0, 50% 100%);
	} @else if ($direction == 'left') {
		$clip-path: polygon(100% 0, 100% 100%, 0 50%);
	} @else if ($direction == 'right') {
		$clip-path: polygon(0 0, 100% 50%, 0 100%);
	} @else if ($direction == 'bottom-left') {
		$clip-path: polygon(0 0, 0 100%, 100% 100%);
	} @else if ($direction == 'bottom-right') {
		$clip-path: polygon(100% 0, 100% 100%, 0 100%);
	} @else if ($direction == 'top-left') {
		$clip-path: polygon(0 0, 100% 0, 0 100%);
	} @else if ($direction == 'top-right') {
		$clip-path: polygon(0 0, 100% 0, 100% 100%);
	}

	display: block flow;
	inline-size: $inline-size;
	block-size: $block-size;
	background: $color;
	clip-path: $clip-path;
}