@use 'sass:meta';
@use 'sass:string';
@use '../../functions/is-alias' as *;
@use '../../functions/is-string' as *;

/// Creates a CSS triangle, which can be used for dropdown arrows, dropdown
/// pips, and more. Use this mixin inside a `&::before` or `&::after` selector,
/// to attach the triangle to an existing element.
///
/// @param {String} $direction ['bottom'] - Direction that the triangle points.
/// Can be `top`, `right`, `bottom`, or `left`.
/// @param {Number} $size [9px] - The width of the triangle.
/// @param {Color} $color [#80f] - The color of the triangle.
///
/// @group Shapes
/// @require {function} is-alias
/// @require {function} is-string
///
/// @throw Invalid $direction value
@mixin triangle($direction: 'bottom', $size: 9px, $color: #80f) {
  @if is-string($direction) {
    $direction: string.to-lower-case($direction);
  }

  content: '';
  display: block;
  width: 0;
  height: 0;

  border: inset $size;

  @if is-alias('bottom', $direction) {
    border-color: $color transparent transparent;
    border-top-style: solid;
    border-bottom-width: 0;
  } @else if is-alias('top', $direction) {
    border-color: transparent transparent $color;
    border-top-width: 0;
    border-bottom-style: solid;
  } @else if is-alias('right', $direction) {
    border-color: transparent transparent transparent $color;
    border-right-width: 0;
    border-left-style: solid;
  } @else if is-alias('left', $direction) {
    border-color: transparent $color transparent transparent;
    border-right-style: solid;
    border-left-width: 0;
  } @else {
    @error 'Invalid direction of #{meta.inspect($direction)} for the ' +
        '[ triangle() ] mixin. The value for $direction must be ' +
        'one of the following: `top`, `right`, `bottom`, or `left`.';
  }
}