css arrow mixins (using border)

arrows.scss

@mixin arrow($color, $width) {
    display: block;
    position: relative;

    &:before,
    &:after {
        content: ' ';
        border: solid transparent;
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    &:before {
        border-width: $width;

    }

    &:after {
        border-width: $width - 2;
    }
}

@mixin arrow-top($color, $width, $bold: 'normal') {
    @include arrow($color, $width);

    width: $width * 2;
    height: $width;

    &:before,
    &:after {
        bottom: 50%;
        left: 50%;
    }

    &:before {
        border-bottom-color: $color;
        margin-left: -$width;
        margin-bottom: -$width/2;
    }

    &:after {
        border-bottom-color: white;
        margin-left: -($width - 2);
        margin-bottom: -$width/2;
        @if $bold == 'bold' {
            margin-left: -1px;
        }
    }
}

@mixin arrow-right($color, $width, $bold: 'normal') {
    @include arrow($color, $width);

    width: $width;
    height: $width * 2;

    &:before,
    &:after {
        top: 50%;
        left: 0%;
    }

    &:before {
        border-left-color: $color;
        margin-top: -$width;
    }

    &:after {
        border-left-color: white;
        margin-top: -($width - 2);
        @if $bold == 'bold' {
            margin-left: -1px;
        }
    }
}

@mixin arrow-bottom($color, $width, $bold: 'normal') {
    @include arrow($color, $width);

    width: $width * 2;
    height: $width;

    &:before,
    &:after {
        top: 50%;
        left: 50%;
    }

    &:before {
        border-top-color: $color;
        margin-left: -$width;
        margin-top: -$width/2;
    }

    &:after {
        border-top-color: white;
        margin-left: -($width - 2);
        margin-top: -$width/2;
        @if $bold == 'bold' {
            margin-left: -1px;
        }
    }
}

@mixin arrow-left($color, $width, $bold: 'normal') {
    @include arrow($color, $width);

    width: $width;
    height: $width * 2;

    &:before,
    &:after {
        top: 50%;
        right: 0%;
    }

    &:before {
        border-right-color: $color;
        margin-top: -$width;
    }

    &:after {
        border-right-color: white;
        margin-top: -($width - 2);
        @if $bold == 'bold' {
            margin-left: -1px;
        }
    }
}