@import '~@/uni_modules/lime-style/index.scss';
$prefix: l !default;
$clipper: #{$prefix}-clipper;

@font-face {
  font-family: clipper-icon;
  src: url('https://at.alicdn.com/t/c/font_4769200_ijsa6pjss7d.ttf?t=1733274494453')
  // src: url('data:application/octet-stream;base64,AAEAAAALAIAAAwAwR1NVQiCLJXoAAAE4AAAAVE9TLzI9gUo9AAABjAAAAGBjbWFwhWDsFAAAAfgAAAF+Z2x5ZsX2J6QAAAOAAAABJGhlYWQqCQFBAAAA4AAAADZoaGVhB94DhAAAALwAAAAkaG10eAwAAAAAAAHsAAAADGxvY2EARACSAAADeAAAAAhtYXhwAREAPQAAARgAAAAgbmFtZRCjPLAAAASkAAACZ3Bvc3TvWVFJAAAHDAAAADgAAQAAA4D/gABcBAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAMAAQAAAAEAAI0L+7JfDzz1AAsEAAAAAADjdV5nAAAAAON1XmcAAAAABAADdgAAAAgAAgAAAAAAAAABAAAAAwAxAAQAAAAAAAIAAAAKAAoAAAD/AAAAAAAAAAEAAAAKADAAPgACREZMVAAObGF0bgAaAAQAAAAAAAAAAQAAAAQAAAAAAAAAAQAAAAFsaWdhAAgAAAABAAAAAQAEAAQAAAABAAgAAQAGAAAAAQAAAAQEAAGQAAUAAAKJAswAAACPAokCzAAAAesAMgEIAAACAAUDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFBmRWQAwOds520DgP+AAAAD3ACAAAAAAQAAAAAAAAAAAAAAAAACBAAAAAQAAAAEAAAAAAAABQAAAAMAAAAsAAAABAAAAVYAAQAAAAAAUAADAAEAAAAsAAMACgAAAVYABAAkAAAABAAEAAEAAOdt//8AAOds//8AAAABAAQAAAACAAEAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAACgAAAAAAAAAAgAA52wAAOdsAAAAAgAA520AAOdtAAAAAQAAAAAAAABEAJIABAAAAAADiQN2ABEAFQAhACcAACUhIiY1ETQ2MyEyFhURFgYHBiUhESElIzQuASM1MhcWFxYlJzcXBxcCSP5mFh0gEwGaFh0CBAUK/mMBXP6kArxSRnZEXE9MLS7+67GxPXp6HSATAT4WHSAT/skHEwgYUgEAMEV1RlIuLUxPEbW1Pnd+AAAAAAMAAAAAA3gCzAAOAB8AMAAAARYUBwYiJjU0Njc2MzIWAREhETc2Mh8BNz4BMzIXJhcTFhURFAYjISImNRE0NjMhMgGMFBQVPSkLChQfERcBx/1wPg0pDj3GCREMFBIFYoQNGxT9cBQbGxQCkxECCRU/DxUpGw4cChQK/vkBj/5nPQ4OPe8ICRECcwE9DRX92xUbGxUCJRUbAAAAAAAAEgDeAAEAAAAAAAAAEwAAAAEAAAAAAAEACAATAAEAAAAAAAIABwAbAAEAAAAAAAMACAAiAAEAAAAAAAQACAAqAAEAAAAAAAUACwAyAAEAAAAAAAYACAA9AAEAAAAAAAoAKwBFAAEAAAAAAAsAEwBwAAMAAQQJAAAAJgCDAAMAAQQJAAEAEACpAAMAAQQJAAIADgC5AAMAAQQJAAMAEADHAAMAAQQJAAQAEADXAAMAAQQJAAUAFgDnAAMAAQQJAAYAEAD9AAMAAQQJAAoAVgENAAMAAQQJAAsAJgFjQ3JlYXRlZCBieSBpY29uZm9udGljb25mb250UmVndWxhcmljb25mb250aWNvbmZvbnRWZXJzaW9uIDEuMGljb25mb250R2VuZXJhdGVkIGJ5IHN2ZzJ0dGYgZnJvbSBGb250ZWxsbyBwcm9qZWN0Lmh0dHA6Ly9mb250ZWxsby5jb20AQwByAGUAYQB0AGUAZAAgAGIAeQAgAGkAYwBvAG4AZgBvAG4AdABpAGMAbwBuAGYAbwBuAHQAUgBlAGcAdQBsAGEAcgBpAGMAbwBuAGYAbwBuAHQAaQBjAG8AbgBmAG8AbgB0AFYAZQByAHMAaQBvAG4AIAAxAC4AMABpAGMAbwBuAGYAbwBuAHQARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQABnJvdGF0ZQVwaG90bwAA');
}


$clipper-edge-border-width: create-var(clipper-edge-border-width, 6rpx); //6rpx !default;
$clipper-confirm-color: create-var(clipper-confirm-color, #07c160); //#07c160 !default;
$clipper-z-index: create-var(clipper-z-index, 99); //99 !default;
$clipper-mask-color: create-var(clipper-mask-color, rgba(0, 0, 0, 0.5)); //99 !default;

.flex-auto {
	flex: auto
}
	
.bg-transparent {
	background-color: rgba(0, 0, 0, 0.9);
	transition-duration: 0.35s;
}

.lime-clipper {
	width: 100%;
	// height: calc(100vh - var(--window-top));
	bottom: 0;
	/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
	top: 0;
	/* #endif */
	/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
	top: var(--window-top);
	/* #endif */
	
	background-color: rgba(0, 0, 0, 0.9);
	position: fixed;
	
	left: 3000%;
	z-index: $clipper-z-index;
	
	&.open {
		left: 0;
	}	
	
	&-mask {
		position: relative;
		z-index: 2;
		overflow: visible;
		flex: 1;
		/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
		pointer-events: none;
		/* #endif */
	}
	&__content {
		pointer-events: none;
		position: absolute;
		
		box-sizing: border-box;
		// box-shadow: $clipper-mask-color 0 0 0 80rpx;
		box-shadow: 0 0 0 800rpx $clipper-mask-color ;
		background: transparent;
		overflow: visible;
		// transition-duration 0.35s
		// transition-property left,top
		/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
		border: 1rpx solid rgba(255,255,255,.3);
		&::before,&::after {
			content: '';
			position: absolute;
			border: 1rpx dashed rgba(255,255,255,.3);
		}
			
		&::before {
			width: 100%;
			top: 33.33%;
			height: 33.33%;
			border-left: none;
			border-right: none;
		}
			
		&::after {
			width: 33.33%;
			left: 33.33%;
			height: 100%;
			border-top:none;
			border-bottom: none;
		}
		/* #endif */
			
	}
	/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */	
	&__edge {
		overflow: visible;
		position: absolute;
		// left 6rpx
		width: 34rpx;
		height: 34rpx;
		// background: red;
		border: $clipper-edge-border-width solid #ffffff;
		pointer-events: auto;
		
		&::before {
			content: '';
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			background-color: transparent;
		}
		&:nth-child(1) {
			left: calc(#{$clipper-edge-border-width} * -1);
			top: calc(#{$clipper-edge-border-width} * -1);
			border-bottom-width: 0 !important;
			border-right-width: 0 !important;
			&:before {
				top: -50%;
				left: -50%;
			}
		}
			
		&:nth-child(2) {
			right: calc(#{$clipper-edge-border-width} * -1);
			top: calc(#{$clipper-edge-border-width} * -1);
			border-bottom-width: 0 !important;
			border-left-width: 0 !important;
			&:before {
				top: -50%;
				left: 50%;
			}
				
		}
			
		&:nth-child(3) {
			left: calc(#{$clipper-edge-border-width} * -1);
			bottom: calc(#{$clipper-edge-border-width} * -1);
			border-top-width: 0 !important;
			border-right-width: 0 !important;
			&:before {
				bottom: -50%;
				left: -50%;
			}
		}
			
		&:nth-child(4) {
			right: calc(#{$clipper-edge-border-width} * -1);
			bottom: calc(#{$clipper-edge-border-width} * -1);
			border-top-width: 0 !important;
			border-left-width: 0 !important;
			&:before {
				bottom: -50%;
				left: 50%;
			}
		}
	}
	/* #endif */
	&-image {
		width: 100%;
		border-style: none;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		transform-origin: center;
		/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
		max-width: inherit;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		/* #endif */
		
	}
		
	&-canvas {
		position: fixed;
		z-index: 100;
		left: -200%;
		top: -200%;
		pointer-events: none;
		
		// left:0;
		// top:50%;
		// background-color: red;
	}
		
	&-tools {
		position: absolute;
		left: 0;
		bottom: 10px;
		width: 100%;
		z-index: 99;
		&__btns {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			.text {
				color: #fff;
				min-width: 60rpx;
				// #ifndef UNI-APP-X
				display: block;
				// #endif
			}
			.cancel {
				font-weight: bold;
				width: 112rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
			}
				
			.confirm {
				font-weight: bold;
				width: 112rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: $clipper-confirm-color;
				border-radius: 6rpx;
				text-align: center;
			}
			.rotate,.photo {
				font-family: clipper-icon;
				font-size: 60rpx;
			}	
			// image {
			// 	// display: block;
			// 	width: 60rpx;
			// 	height: 60rpx;
			// }
		}	
	}		
}