@use "sass:math";

/// Converts an element to an up, down, left or right triangle. This method of
/// rendering a triangle allows CSS animations and transitions to be applied
/// to triangle properties.
///
/// @author John Hildenbiddle (@jhildenbiddle)
///
/// @param {up|down|left|right} $direction [down] - Direction of triangle
/// @param {Length} $width [16px] - Width of triangle
/// @param {Length} $height [16px] - Height of triangle
/// @param {Color} $color [currentColor] - Color of triangle
@mixin triangle($direction: down, $width: null, $height: null, $color: currentColor) {
    // Default size
    @if $width == null and $height == null {
        $width : 16px;
        $height: $width;
    }
    // Equal height/width when one dimension is specified
    @else {
        $width : if($width == null, $height, $width);
        $height: if($height == null, $width, $height);
    }

    // Default to px for unitless values
    $width : if(math.is-unitless($width), $width * 1px, $width);
    $height: if(math.is-unitless($height), $height * 1px, $height);

    content: '';
    width: 0;
    height: 0;

    @if $direction == "up" {
        border-top: 0;
        border-bottom: $height solid $color;
        border-left: ($width * 0.5) solid transparent;
        border-right: ($width * 0.5) solid transparent;
    }
    @else if $direction == "down" {
        border-top: $height solid $color;
        border-bottom: 0;
        border-left: ($width * 0.5) solid transparent;
        border-right: ($width * 0.5) solid transparent;
    }
    @else if $direction == "left" {
        border-top: ($height * 0.5) solid transparent;
        border-bottom: ($height * 0.5) solid transparent;
        border-left: 0;
        border-right: $width solid $color;
    }
    @else if $direction == "right" {
        border-top: ($height * 0.5) solid transparent;
        border-bottom: ($height * 0.5) solid transparent;
        border-left: $width solid $color;
        border-right: 0;
    }
}