$prefix-popper : #{$prefix}popper;
.#{$prefix-popper}{
    $arrowWidth: 6px;
    @include get-color-bg();
    @include get-color-shadow();
    border-radius: $border-radius-button;
    z-index: $zindex-tooltip;
    &-arrow{
        position: absolute;
        z-index: -1;
        width: $arrowWidth;
        height: $arrowWidth;
        @include get-color-bg();
        @include get-color-shadow(1px, -1px, 2px, -1px);
        border-top-right-radius: $border-radius-button / 2;
    }
    @each $dir1, $dir2, $deg in (left,right,45deg) (right,left,-135deg) (top,bottom,135deg) (bottom,top,-45deg) {
        &[x-placement^='#{$dir1}']{
            margin-#{$dir2}: $arrowWidth;
            &:after{
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                #{$dir2}: -$arrowWidth;
                content: ' ';
                z-index: -1;
            }
            &>.#{$prefix-popper}-arrow{
                #{$dir2} : -$arrowWidth / 2;
                transform: rotate($deg);
            }
        }
    }
}