[Line arrow mixin] Line arrow mixin for scss #arrow

arrows.scss

@mixin arrow($line-width:4px, $size:4px, $color:#000, $direction:down) {
    border: solid $color;
    border-width: 0 $line-width $line-width 0;
    display: inline-block;
    padding: $size;
    margin-top: -$size;

    @if $direction == down {
        transform: rotate(45deg);
    } @else if $direction == up {
        transform: rotate(-135deg);
    } @else if $direction == left {
        transform: rotate(135deg);
    } @else if $direction == right {
        transform: rotate(-45deg);
    }
}