@use 'sass:math';
@use 'sass:list';
@use '../functions/validator' as *;

/// 生成一个指定方向的三角形
/// @param {string} $direction 方向
/// @param {string} $color 颜色
/// @param {number} $width 三角形宽度
/// @param {number} $height 三角形高度
/// @example scss
/// @include triangle(top, blue, 10px, 10px);
/// -----------------------------------------------------
@mixin triangle(
  $direction,
  $color,
  $width: 1em,
  $height: 1em
) {
  @if not list.index(
    ("top", "right", "bottom", "left", "top-right", "top-left", "bottom-right", "bottom-left"),
    $direction
  ) {
    @error "[triangle]: Direction must be `top`, `right`, `bottom`, `left`, `top-right`, `top-left`, `bottom-right`, `bottom-left` .";
  } @else if not is-color($color) {
    @error "[triangle]: Color must be a valid color.";
  } @else {
    border-style: solid;
    height: 0;
    width: 0;
    font-size: 0;

    @if $direction == "top" {
      border-width: 0 math.div($width, 2) $height math.div($width, 2);
      border-color: transparent transparent $color transparent;
    } @else if $direction == "top-right" {
      border-width: 0 $width $height 0;
      border-color: transparent $color transparent transparent;
    } @else if $direction == "right" {
      border-width: math.div($height, 2) 0 math.div($height, 2) $width;
      border-color: transparent transparent transparent $color;
    } @else if $direction == "bottom-right" { // Tip points bottom-right
      border-width: $height $width 0 0;
      border-color: $color transparent transparent transparent;
    } @else if $direction == "bottom" {
      border-width: $height math.div($width, 2) 0 math.div($width, 2);
      border-color: $color transparent transparent transparent;
    } @else if $direction == "bottom-left" { // Tip points bottom-left
      border-width: $height 0 0 $width;
      border-color: $color transparent transparent transparent; // This was standard, makes color on top. My test expects this.
                                                        // Original mixin had color on left, which points top-right.
    } @else if $direction == "left" {
      border-width: math.div($height, 2) $width math.div($height, 2) 0;
      border-color: transparent $color transparent transparent;
    } @else if $direction == "top-left" {
      border-width: 0 0 $height $width;
      border-color: transparent transparent transparent $color;
    }
  }
}