/* FIXME: these two values couples with ARROW_OFFSET in postion.js */
$arrow-offset: 14px;
$arrow-size: 6px;

$arrow-cover-size: 11px;

.zent-pop {
    border-radius: 2px;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
    background-color: #fff;
    z-index: 1050;
    font-size: 12px;

    .zent-pop-inner, .zent-pop-header {
        position: relative;
        background: #fff;
        border-radius: 2px;
        padding: 10px 20px;
        z-index: 2;
        color: #333;
    }

    .zent-pop-header {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .zent-pop-header {
        border-bottom: 1px solid #e9e9e9;
    }

    .zent-pop-buttons {
        min-width: 160px;
        text-align: right;
        margin-right: 0;
        margin-top: 10px;
    }

    .zent-pop-arrow {
        position: absolute;
        z-index: 1;
        width: $arrow-size;
        height: $arrow-size;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
        overflow: hidden;
    }

    &::after {
        content: '';
        display: block;
        position: absolute;
        width: $arrow-cover-size;
        height: $arrow-cover-size;
    }

    &.zent-popover-position {
        /* bottom side */
        &-bottom-left, &-bottom-center, &-bottom-right {
            .zent-pop-arrow {
                top: 0;
            }

            &::after {
                top: -$arrow-cover-size;
                width: 100%;
                left: 0;
            }
        }

        &-bottom-left {
            .zent-pop-arrow {
                transform: translateY(-50%) rotate(45deg);
                left: $arrow-offset;
            }
        }

        &-bottom-center {
            .zent-pop-arrow {
                transform: translate(-50%, -50%) rotate(45deg);
                left: 50%;
            }
        }

        &-bottom-right {
            .zent-pop-arrow {
                transform: translateY(-50%) rotate(45deg);
                right: $arrow-offset;
            }
        }

        /* top side */
        &-top-left, &-top-center, &-top-right {
            .zent-pop-arrow {
                bottom: 0;
            }

            &::after {
                bottom: -$arrow-cover-size;
                width: 100%;
                left: 0;
            }
        }

        &-top-left {
            .zent-pop-arrow {
                transform: translateY(50%) rotate(45deg);
                left: $arrow-offset;
            }
        }

        &-top-center {
            .zent-pop-arrow {
                transform: translate(-50%, 50%) rotate(45deg);
                left: 50%;
            }
        }

        &-top-right {
            .zent-pop-arrow {
                transform: translateY(50%) rotate(45deg);
                right: $arrow-offset;
            }
        }

        /* left side */
        &-left-top, &-left-center, &-left-bottom {
            .zent-pop-arrow {
                right: 0;
            }

            &::after {
                right: -$arrow-cover-size;
                height: 100%;
                top: 0;
            }
        }

        &-left-top {
            .zent-pop-arrow {
                transform: translateX(50%) rotate(45deg);
                top: $arrow-offset;
            }
        }

        &-left-center {
            .zent-pop-arrow {
                transform: translate(50%, -50%) rotate(45deg);
                top: 50%;
            }
        }

        &-left-bottom {
            .zent-pop-arrow {
                transform: translateX(50%) rotate(45deg);
                bottom: $arrow-offset;
            }
        }

        /* left side */
        &-right-top, &-right-center, &-right-bottom {
            .zent-pop-arrow {
                left: 0;
            }

            &::after {
                left: -$arrow-cover-size;
                height: 100%;
                top: 0;
            }
        }

        &-right-top {
            .zent-pop-arrow {
                transform: translateX(-50%) rotate(45deg);
                top: $arrow-offset;
            }
        }

        &-right-center {
            .zent-pop-arrow {
                transform: translate(-50%, -50%) rotate(45deg);
                top: 50%;
            }
        }

        &-right-bottom {
            .zent-pop-arrow {
                transform: translateX(-50%) rotate(45deg);
                bottom: $arrow-offset;
            }
        }
    }
}