_arrow.scss

/**
 * Creates an arrow
 *
 * @param {string} $direction (up) - Arrow direction: up, down, left or right
 * @param {color} $color (#000) - Arrow color
 * @param {size} $size (10px) - Size of the opposite side of the arrow
 * @param {number} $stretch (1) - Amount of the stretch of the arrow
 * @param {boolean} $exclude-base (false) - Remove the default arrow styling (usefull if you want to modify the direction of the arrow on rollover
 */
@mixin arrow($direction: up, $color: #000, $size: 10px, $stretch: 1, $excludeBase: false) {
  @if $excludeBase == false {
    display: inline-block;
    vertical-align: middle;
    inline-size: 0;
    block-size: 0;
    font: 0/0 serif;
  }

  $size: round($size * 0.5);
  $longSize: $size * $stretch;

  @if $direction == down {
    border-block-start: $longSize solid #{$color};
    border-inline: $size solid transparent;
    border-block-end: 0;
  } @else if $direction == left {
    border-block: $size solid transparent;
    border-inline-start: 0;
    border-inline-end: $longSize solid #{$color};
  } @else if $direction == right {
    border-block: $size solid transparent;
    border-inline-start: $longSize solid #{$color};
    border-inline-end: 0;
  } @else {
    border-block-start: 0;
    border-inline: $size solid transparent;
    border-block-end: $longSize solid #{$color};
  }
}