@charset “UTF-8”;

/// Generates a triangle pointing in a specified direction. /// /// @argument {string} $direction /// The direction the triangle should point. Accepts `up`, `up-right`, /// `right`, `down-right`, `down`, `down-left`, `left` or `up-left`. /// /// @argument {number (with unit)} $width /// Width of the triangle. /// /// @argument {number (with unit)} $height /// Height of the triangle. /// /// @argument {color} $color /// Color of the triangle. /// /// @example scss /// .element { /// &::before { /// @include triangle(“up”, 2rem, 1rem, b25c9c); /// content: “”; /// } /// } /// /// // CSS Output /// .element::before { /// border-style: solid; /// height: 0; /// width: 0; /// border-color: transparent transparent b25c9c; /// border-width: 0 1rem 1rem; /// content: “”; /// }

@mixin triangle(

$direction,
$width,
$height,
$color

) {

@if not index(
  "up" "up-right" "right" "down-right" "down" "down-left" "left" "up-left",
  $direction
) {
  @error "Direction must be `up`, `up-right`, `right`, `down-right`, " +
    "`down`, `down-left`, `left` or `up-left`.";
} @else if not _is-color($color) {
  @error "`#{$color}` is not a valid color for the `$color` argument in " +
    "the `triangle` mixin.";
} @else {
  border-style: solid;
  height: 0;
  width: 0;

  @if $direction == "up" {
    border-color: transparent transparent $color;
    border-width: 0 ($width / 2) $height;
  } @else if $direction == "up-right" {
    border-color: transparent $color transparent transparent;
    border-width: 0 $width $width 0;
  } @else if $direction == "right" {
    border-color: transparent transparent transparent $color;
    border-width: ($height / 2) 0 ($height / 2) $width;
  } @else if $direction == "down-right" {
    border-color: transparent transparent $color;
    border-width: 0 0 $width $width;
  } @else if $direction == "down" {
    border-color: $color transparent transparent;
    border-width: $height ($width / 2) 0;
  } @else if $direction == "down-left" {
    border-color: transparent transparent transparent $color;
    border-width: $width 0 0 $width;
  } @else if $direction == "left" {
    border-color: transparent $color transparent transparent;
    border-width: ($height / 2) $width ($height / 2) 0;
  } @else if $direction == "up-left" {
    border-color: $color transparent transparent;
    border-width: $width $width 0 0;
  }
}

}