/*
* created by zhongzheng at 2021.1.11
*/
@import "../style/themes/default.less";
@import "../style/mixins/index.less";

@popover-prefix-cls: ~"@{sino-prefix}-popover";

.@{popover-prefix-cls} {
    overflow: visible;
    padding: @popover-padding;
    line-height: @popover-line-height;
    font-size: @popover-font-size;
    color: #fff;
    border-radius: @popover-border-radius;
    background-color: @popover-background-color;
    box-shadow: @popover-box-shadow;
    transition: opacity 0.15s, transform 0.15s;

    &-wrapper {
        display: inline-block;

        >.sn-popup {
            overflow: unset;
        }
    }

    &-content {
        display: flex;

        @media screen and (max-width: @screen-sm) {
            max-width: calc(~'100vw * 2 / 3');
        }

        @media screen and (min-width: @screen-sm) {
            max-width: 300px;
        }

        @media screen and (min-width: @screen-lg) {
            max-width: 400px;
        }

        &-message {
            text-align: justify;
        }

        &-close {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            height: .24rem;
            margin-top: .08rem;
            margin-left: .16rem;
            padding-left: .14rem;
            font-size: @popover-close-font-size;
            border-left: .02rem solid rgba(255, 255, 255, .29);
        }
    }

    &-arrow {
        position: absolute;
        width: @popover-arrow-width;
        height: @popover-arrow-height;
        color: @popover-arrow-color;

        svg {
            width: 100%;
            height: 100%;
        }
    }

    &-zoom-enter,
    &-zoom-leave-active {
        transform: scale(0.8);
        opacity: 0;
    }

    &-zoom-enter-active {
        transition-timing-function: ease-out;
    }

    &-zoom-leave-active {
        transition-timing-function: ease-in;
    }
}

div[data-popper-placement="top"] {

    .sn-popover-arrow {
        bottom: 0;
        transform: translateY(50%);
    }
}

div[data-popper-placement="bottom"] {

    .sn-popover-arrow {
        top: 0;
        transform: translateY(-50%);
    }
}
