@import "../../style/common";

.mona-popup {
	z-index: 300;
	.mona-popup-mask {
		background-color: rgba(0, 0, 0, 0.7);
		opacity: 0;
	}
	.mona-popup-con {
		background-color: #fff;
		z-index: 10;
	}
	&.bottom {
		.mona-popup-con {
			left: 0;
			right: 0;
			bottom: 0;
			opacity: 0;
			transform: translateY(100%);
		}
	}
	&.top {
		.mona-popup-con {
			top: 0;
			left: 0;
			right: 0;
			opacity: 0;
			transform: translateY(-100%);
		}
	}
	&.right {
		.mona-popup-con {
			top: 0;
			bottom: 0;
			right: 0;
			opacity: 0;
			transform: translateX(100%);
		}
	}
	&.have-animate {
		.mona-popup-con, .mona-popup-mask {
			transition: all @popupAnimDuration ease 0s;
		}
	}
	&.show-content {
		.mona-popup-con {
			opacity: 1;
			transform: none;
		}
		.mona-popup-mask {
			opacity: 1;
		}
	}
}