$popup-close-icon-margin: 16px;

.popup-fade-enter-active {
	animation: nut-fade-in;
}

.popup-fade-leave-active {
	animation: nut-fade-out;
}

.popup-slide {
	&-center-enter-active {
		animation: nut-fade-in;
	}

	&-center-leave-active {
		animation: nut-fade-out;
	}

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

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

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

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

.popup-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.popup-bottom {
	bottom: 0;
	left: 0;
	width: 100%;

	&.round {
		border-radius: 20px 20px 0 0;
	}
}

.popup-right {
	top: 0;
	right: 0;

	&.round {
		border-radius: 20px 0 0 20px;
	}
}

.popup-left {
	top: 0;
	left: 0;

	&.round {
		border-radius: 0 20px 20px 0;
	}
}

.popup-top {
	top: 0;
	left: 0;
	width: 100%;

	&.round {
		border-radius: 0 0 20px 20px;
	}
}

.popup-box {
	position: fixed;
	max-height: 100%;
	overflow-y: auto;
	background-color: #fff;
	transition: transform 0.3s;
	-webkit-overflow-scrolling: touch;
}

@keyframes nut-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes nut-fade-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.nut-overflow-hidden {
	overflow: hidden !important;
}

.nutui-popup {
	&__close-icon {
		position: absolute;
		z-index: 1;
		color: #969799;
		font-size: 18px;
		cursor: pointer;

		&:active {
			opacity: 0.7;
		}

		&--top-left {
			top: $popup-close-icon-margin;
			left: $popup-close-icon-margin;
		}

		&--top-right {
			top: $popup-close-icon-margin;
			right: $popup-close-icon-margin;
		}

		&--bottom-left {
			bottom: $popup-close-icon-margin;
			left: $popup-close-icon-margin;
		}

		&--bottom-right {
			right: $popup-close-icon-margin;
			bottom: $popup-close-icon-margin;
		}
	}
}

.popup-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
}

@keyframes nut-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes nut-fade-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}