.cl-cropper__wrap {
	position: fixed;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	z-index: 99;

	.cl-cropper {
		height: 100%;

		&__container {
			height: 100%;
			position: relative;
		}

		&__view {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			z-index: 999;
			box-shadow: 0 0 1px 1px #fff;
			overflow: hidden;
			pointer-events: none;

			image {
				display: block;
				z-index: 1;
			}

			&.is-round {
				border-radius: 100%;
			}
		}

		&__image {
			position: absolute;

			&.is-filter-blur {
				filter: blur(20rpx);
			}

			image {
				display: block;
				height: 100%;
				width: 100%;
			}
		}

		&__tools {
			height: 80rpx;
			width: 100%;
			background-color: rgba(0, 0, 0, 0.2);
			position: absolute;
			/* #ifdef H5 */
			top: 44px;
			/* #endif */
			/* #ifndef H5 */
			top: 0;
			/* #endif */
			z-index: 9;

			&-item {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				height: 80rpx;
				margin: 0 20rpx;

				text {
					color: #fff;

					&:last-child {
						font-size: 24rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		&__footer {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding-bottom: env(safe-area-inset-bottom);
			position: absolute;
			bottom: 50rpx;
			left: 0;

			button {
				background-color: transparent;
				color: #fff;
				font-size: 30rpx;
				font-weight: 500;
				border-width: 0;
				margin: 0 auto;

				&::after {
					border-width: 0;
				}
			}
		}

		&__mask {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
			background-color: rgba(0, 0, 0, 0.6);
			pointer-events: none;
		}
	}

	.cl-cropper__canvas {
		position: absolute;
		top: -1000px;
		left: -1000px;
		z-index: 0;
	}
}