// Set Triangle
@import "variables";

@mixin arrow($direction, $width, $height, $color) {
  width: 0;
  height: 0;
  border-style: solid;

  @if $direction == "top" {
    border-width: $width $height 0 $height;
    border-color: $color transparent transparent transparent;
  }

  @else if $direction == "right" {
    border-width: $height $width $height 0;
    border-color: transparent $color transparent transparent;
  }

  @else if $direction == "bottom" {
    border-width: 0 $height $width $height;
    border-color: transparent transparent $color transparent;
  }

  @else if $direction == "left" {
    border-width: $height 0 $height $width;
    border-color: transparent transparent transparent $color;
  }

  @else if $direction == "top-right" {
    border-width: 0 $width $height 0;
    border-color: transparent $color transparent transparent;
  }

  @else if $direction == "top-left" {
    border-width: $height $width 0 0;
    border-color: $color transparent transparent transparent;
  }

  @else if $direction == "bottom-right" {
    border-width: 0 0 $height $width;
    border-color: transparent transparent $color transparent;
  }

  @else if $direction == "bottom-left" {
    border-width: $height 0 0 $width;
    border-color: transparent transparent transparent $color;
  }
}

@mixin list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}