@mixin commonArrowStyles($arrowColor) {
    position: absolute;
    border: solid $arrowColor;
}

@mixin css-arrow2(
    $arrowColor,
    $direction: 'down',
    $arrowWidth: 24px,
    $arrowHeight: 24px,
    $boxShadow: none,
    $edge: 'top',
    $offsetFrom: 'left',
    $distance: 10px
) {

    @if $direction == 'up' {
        &::before {
            content: '';
            @include commonArrowStyles($arrowColor);
            border-width: $arrowHeight ($arrowWidth/2);
            border-color: transparent transparent $arrowColor;
            top: -($arrowHeight * 2);
            @if ($offsetFrom == 'left') {
                left: $distance;
            }
            @else if ($offsetFrom == 'right') {
                right: $distance;
            }
        }
    }
    @else if $direction == 'down' {
        &::after {
            content: '';
            @include commonArrowStyles($arrowColor);
            border-width: $arrowHeight ($arrowWidth/2);
            border-color: $arrowColor transparent transparent;
            bottom: -($arrowHeight * 2);
            @if ($offsetFrom == 'left') {
                left: $distance;
            }
            @else if ($offsetFrom == 'right') {
                right: $distance;
            }
        }
    }
    @else if $direction == 'right' {
        &::before {
            content: '';
            @include commonArrowStyles($arrowColor);
            border-width: ($arrowHeight/2) $arrowWidth;
            border-color: transparent transparent transparent $arrowColor;
            right: -($arrowWidth * 2);
            @if ($offsetFrom == 'left' or $offsetFrom == 'top') {
                top: $distance;
            }
            @else if ($offsetFrom == 'bottom') {
                bottom: $distance;
            }
        }
    }
    @else if $direction == 'left' {
        &::before {
            content: '';
            @include commonArrowStyles($arrowColor);
            border-width: ($arrowHeight/2) $arrowWidth;
            border-color: transparent $arrowColor transparent transparent;
            left: -($arrowWidth * 2);
            @if ($offsetFrom == 'left' or $offsetFrom == 'top') {
                top: $distance;
            }
            @else if ($offsetFrom == 'bottom') {
                bottom: $distance;
            }
        }
    }
}