@mixin arrow($size, $border-width, $color, $direction) {
  display: inline-block;
  width: $size;
  height: $size;
  border: $border-width solid $color;
  content: '';

  @if($direction == 'up') {
    transform: rotate(45deg);
    border-right: 0;
    border-bottom: 0;
  }

  @if($direction == 'right') {
    transform: rotate(45deg);
    border-bottom: 0;
    border-left: 0;
  }

  @if($direction == 'down') {
    transform: rotate(45deg);
    border-top: 0;
    border-left: 0;
  }

  @if($direction == 'left') {
    transform: rotate(45deg);
    border-top: 0;
    border-right: 0;
  }
}

// https://davidwalsh.name/css-triangles
@mixin triangle($size, $color, $direction) {
  width: 0;
  height: 0;
  font-size: 0;
	line-height: 0;

  @if($direction == 'up') {
    border-left: $size solid transparent;  /* left arrow slant */
    border-right: $size solid transparent; /* right arrow slant */
    border-bottom: $size solid $color; /* bottom, add background color here */
  }

  @if($direction == 'right') {
    border-bottom: $size solid transparent;  /* left arrow slant */
    border-top: $size solid transparent; /* right arrow slant */
    border-left: $size solid $color; /* bottom, add background color here */
  }

  @if($direction == 'down') {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;
  }

  @if($direction == 'left') {
    border-bottom: $size solid transparent;  /* left arrow slant */
	  border-top: $size solid transparent; /* right arrow slant */
	  border-right: $size solid $color; /* bottom, add background color here */
  }
}