.@{prefixCls}-popover {
    opacity: 0;
    .transition(ease-in);

    &-show {
        opacity: 1;
        .transition(ease-out);
    }

    &-disable-animation {
        .property-prefix(transition-duration, 0s);
    }

    &-scale-xy {
        .transform(scale(0.8));

        &.@{prefixCls}-popover-show {
            .transform(scale(1));
        }
    }

    &-scale-x {
        .transform(scaleX(0.8));

        &.@{prefixCls}-popover-show {
            .transform(scaleX(1));
        }
    }

    &-scale-y {
        .transform(scaleY(0.8));

        &.@{prefixCls}-popover-show {
            .transform(scaleY(1));
        }
    }

    &-left {
        .property-prefix(transform-origin, calc(100% + 8px) 50%);

        &-start {
            .property-prefix(transform-origin, calc(100% + 8px) 16px);
        }

        &-end {
            .property-prefix(transform-origin, calc(100% + 8px) calc(100% - 16px));
        }
    }

    &-right {
        .property-prefix(transform-origin, -8px 50%);

        &-start {
            .property-prefix(transform-origin, -8px 16px);
        }

        &-end {
            .property-prefix(transform-origin, -8px calc(100% - 16px));
        }
    }

    &-top {
        .property-prefix(transform-origin, 50% calc(100% + 8px));

        &-start {
            .property-prefix(transform-origin, 16px calc(100% + 8px));
        }

        &-end {
            .property-prefix(transform-origin, calc(100% - 16px) calc(100% + 8px));
        }
    }

    &-bottom {
        .property-prefix(transform-origin, 50% -8px);

        &-start {
            .property-prefix(transform-origin, 16px -8px);
        }

        &-end {
            .property-prefix(transform-origin, calc(100% - 16px) -8px);
        }
    }
}