.cl-popup__wrapper {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transition: all 0.3s;
	pointer-events: none;

	&.is-open {
		pointer-events: auto;
		opacity: 1;

		.cl-popup {
			transition: all 0.4s;
			transform: translate(0, 0);
		}
	}

	&::after {
		content: "";
		display: inline-block;
		height: 100%;
		width: 0;
		vertical-align: middle;
	}

	.cl-popup__modal {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.cl-popup {
		background-color: #fff;
		position: absolute;
		transition: all 0.3s;
		box-sizing: border-box;

		&__header {
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
			font-size: 30rpx;
			height: 90rpx;
			letter-spacing: 1rpx;
			font-weight: 500;
		}

		&__container {
			height: 100%;
			box-sizing: border-box;
		}

		&__close {
			position: absolute;
			top: 26rpx;
			right: 26rpx;
			font-size: 38rpx;
			line-height: 1;
		}
	}

	&--left {
		.cl-popup {
			transform: translateX(-100%);
			top: 0;
			left: 0;
		}
	}

	&--right {
		.cl-popup {
			transform: translateX(100%);
			right: 0;
			top: 0;
		}
	}

	&--top {
		.cl-popup {
			transform: translateY(-100%);
			left: 0;
			top: 0;
		}
	}

	&--bottom {
		.cl-popup {
			transform: translateY(100%);
			left: 0;
			bottom: 0;
		}
	}

	&--center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.cl-popup {
			transform: scale(1.3);
		}
	}

	&--left,
	&--right,
	&--bottom {
		.cl-popup {
			padding-bottom: env(safe-area-inset-bottom);
		}
	}
}