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

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

		.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%;
		background-color: rgba(0, 0, 0, 0.4);
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

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

		&__container {
			height: 100%;
		}
	}

	&--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);
		}
	}

	&--top,
	&--left,
	&--right {
		.cl-popup {
			/* #ifdef H5 */
			padding-top: 44px;
			/* #endif */

			/* #ifndef H5 */
			padding-top: env(safe-area-inset-top);
			/* #endif */
		}
	}

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