// =======================================
// ARROW ICONS
// =======================================
=arrow($direction, $size: 0.5rem, $color: $color-default)
  width: 0
  height: 0

  @if $direction == 'up'
    border:
      bottom: $size solid $color
      left: $size solid $color-none
      right: $size solid $color-none
  @else if $direction == 'down'
    border:
      top: $size solid $color
      left: $size solid $color-none
      right: $size solid $color-none
  @else if $direction == 'left'
    border:
      top: $size solid $color-none
      bottom: $size solid $color-none
      right: $size solid $color
  @else if $direction == 'right'
    border:
      top: $size solid $color-none
      bottom: $size solid $color-none
      left: $size solid $color
  @else
    @warn ('Error: Your direction can only be "left", "right", "up", or "down"')