@mixin css-arrow(
    $direction,
    $arrowSize,
    $backgroundColor,
    $boxShadow: none,
    $distanceAcross: 50%
) {
    overflow: hidden;
    position: absolute;
    height: $arrowSize;
    width: $arrowSize;

    &:after {
        content: '';
        position: absolute;
        transform: rotate(45deg);
        box-shadow: $boxShadow;
        background: $backgroundColor;
        width: $arrowSize;
        height: $arrowSize;
    }

    $adjustedmentToAfterElement: -$arrowSize * 3 / 4;
    $arrowStartPosition: calc(#{$distanceAcross} - #{$arrowSize / 2});

    @if $direction == 'down' {

        top: 100%;
        left: $arrowStartPosition;
        &:after {
            left: 0;
            top: $adjustedmentToAfterElement;
        }

    } @else if $direction == 'right' {

        left: 100%;
        top: $arrowStartPosition;
        &:after {
            top: 0;
            left: $adjustedmentToAfterElement;
        }

    } @else if $direction == 'up' {

        top: -$arrowSize;
        left: $arrowStartPosition;
        &:after {
            left: 0;
            top: -$adjustedmentToAfterElement;
        }

    } @else if $direction == 'left' {

        left: -$arrowSize;
        top: $arrowStartPosition;
        &:after {
            top: 0;
            left: -$adjustedmentToAfterElement;
        }
    }
}