@import '../../common/style/common.less';
@import '../../common/style/animation.less';

.hanzo {
    &-overflow-hidden {
        overflow: hidden !important;
    }

    &-popup {
        position                  : fixed;
        max-height                : 100%;
        overflow-y                : auto;
        background-color          : @white;
        transition                : .3s ease-out;
        -webkit-overflow-scrolling: touch;

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

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

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

        &--bottom {
            width    : 100%;
            bottom   : 0;
            left     : 50%;
            transform: translate3d(-50%, 0, 0);
        }

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

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

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

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

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