$color-border-arrow: #d4d4d5;
$arrow-size: 1.2rem;

.codeflow-popover {

    position: relative;

    &__body {
        min-width: 100%;
        z-index: $z-index;

        &--top {
            position: absolute;
            top: 0;
            left: 0;
            transform: translateY(-100%);
        }

        &--right {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(100%, -50%);
        }

        &--left {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(-100%, -50%);
        }

        &--bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            transform: translateY(100%);
        }

        &--bottom-right {
            position: absolute;
            bottom: 0;
            right: 0;
            transform: translateY(100%);
        }

        &--center {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }

        &--bottom-arrow {

            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            z-index: $z-index;

            box-shadow: 0 2px 4px 0 $color-shadow-weak, 0 2px 10px 0 $color-shadow;
            border: 1px solid $color-border-arrow;
            margin-top: $arrow-size;

            &::before {
                width: $arrow-size;
                height: $arrow-size;
                background-color: $color-background;
                box-shadow: 1px 1px 0 0 #bababc;//#bababc;
                transform: translateX(-50%) rotate(-135deg);
                margin-top: -$arrow-size/2;

                content: '';
                position: absolute;
                left: 50%;
                top: 0;
                
                //transform: translate(-50%, -100%);
                // border-top: $arrow-size solid transparent;
                // border-right: $arrow-size solid transparent;
                // border-bottom: $arrow-size solid $color-border;
                // border-left: $arrow-size solid transparent;
            }
        }
    }
}