@mixin arrow($direction, $width: 20px, $borderColor: #000, $thick: 1px, $top: 0, $left: 0) {
  $sqrt2: 1.41;
  $size: floor($width / $sqrt2 - 2 * $thick);
  width: $width;
  height: $width;
  &:after {
  content: '';
  display: inline-block;
  position: relative;
  z-index: 10;
  width: $size;
  height: $size;
  border-top: $thick solid $borderColor;
  border-right: $thick solid $borderColor;
  @if ($direction == 'up') {
    top: $top; 
    left: $left;
    transform: rotate(-45deg) ;
  }
  @if ($direction == 'down') {
    top: $top;
    left: $left;
    transform: rotate(135deg);
  }
  @if ($direction == 'left') {
    top: $left;
    left: $top;
    transform: rotate(-135deg);
  }
  @if ($direction == 'right') {
    top: $left;
    left: $top;
    transform: rotate(45deg);
  }
  }
}

.arrow {
  padding: 30px;
  border: 1px solid;
}
.icon-arrow {
  display: block;
  background: rgba(red, 0.4);
  &.up {
    @include arrow('up', 20px, #000, 1px, 8px, 3px)
  }
  &.down {
    @include arrow('down', 20px, #000, 1px, 0, 3px)
      }
  &.left {
    @include arrow('left', 20px, #000, 1px, 6px, 4px)
      }
  &.right {
    @include arrow('right', 20px, #000, 1px, 0, 4px)
      }
}