@import '../style/themes/default.less';

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

.@{popup-prefix-cls} {
    position: fixed;
    max-width: @screen-lg;
    max-height: 100%;
    overflow-y: auto;
    background-color: #ffffff;
    transition: transform @animation-duration-base @ease-out;
    -webkit-overflow-scrolling: touch;

    &-center {
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
    }

    &-top {
        top: 0;
        left: 0;
        width: 100%;
    }

    &-right {
        top: 0;
        right: 0;
        height: 100%;
        transform: translate3d(0, 0, 0);
    }

    &-bottom {
        bottom: 0;
        left: 0;
        width: 100%;
    }

    &-left {
        top: 0;
        left: 0;
        height: 100%;
        transform: translate3d(0, 0, 0);
    }

    &-slide-top-enter,
    &-slide-top-leave-active {
        transform: translate3d(0, -100%, 0);
    }

    &-slide-right-enter,
    &-slide-right-leave-active {
        transform: translate3d(100%, 0, 0);
    }

    &-slide-bottom-enter,
    &-slide-bottom-leave-active {
        transform: translate3d(0, 100%, 0);
    }

    &-slide-left-enter,
    &-slide-left-leave-active {
        transform: translate3d(-100%, 0, 0);
    }

    @media screen and (min-width: @screen-lg) {

        &-top,
        &-bottom,
        &-left {
            left: calc(~'(100vw - @{screen-lg}) / 2');
        }

        &-right {
            right: calc(~'(100vw - @{screen-lg}) / 2');
        }
    }
}
