/* #ifndef APP-NVUE */
// @import '@/uni_modules/lime-ui/style/index.scss';
@supports(background: conic-gradient(#000, #fff)) {
	.check {
		height: 1rpx;
		position: absolute;
	}
}
// @property --l-circle-percent {
//   syntax: '<percentage>';
//   // syntax: '<number>';
//   initial-value: 25%;
//   // initial-value: 0;
//   inherits: true;
// }
// @property --l-circle-percent2 {
//   syntax: '<number>';
//   initial-value: 0;
//   inherits: true;
// }
/* #ifdef VUE3 */
$size: 12rpx;
/*  #endif */
/* #ifndef VUE3 */
$size: 6px;
/*  #endif */
$fill-2: var(--l-fill-2, rgba(0, 0, 0, 0.06));
$circle-trail-cap-size: var(--l-circle-trail-cap-size, $size);
$circle-trail-cap-color: currentColor;//var(--l-circle-trail-cap-color, currentColor);
$circle-stroke-cap-size: var(--l-circle-stroke-cap-size, $size);
$circle-stroke-cap-start-color: var(--l-circle-stroke-cap-start-color, $fill-2);
$circle-stroke-cap-end-color: var(--l-circle-stroke-cap-end-color, $fill-2);
:root {
	display: inline-block;
	--l-circle-percent: 0%;
	--l-circle-percent2: 0;
}
/*  #endif */



.l-circle {
	--l-circle-percent: 0%;
	transition-property: --l-circle-percent2,--l-circle-percent;
	transition-duration: 300ms;
	
	position: relative;
	display: inline-block;
	/* #ifndef APP-NVUE */
	&__canvas {
		width: 100%;
		height: 100%;
	}
	/*  #endif */
	&__inner{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		align-items: center;
		justify-content: center;
		/* #ifndef APP-NVUE */
		display: flex;
		/*  #endif */
	}
	/* #ifdef APP-NVUE */
	&__view {
		flex: 1;
	}
	/*  #endif */
	/* #ifndef APP-NVUE */
	&__trail,&__stroke,&__stroke-line {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	&__trail{
		background: var(--l-background);
	}
	&__stroke-line {
		z-index: 2;
		background: var(--l-background);
	}
	/*  #endif */
}

/* #ifndef APP-NVUE */
.is-round {
	.l-circle {
		
		&__trail {
			--l-circle-percent: 100%;
			--l-circle-percent2: 1;
			.cap {
				position: absolute;
				display: block;
				width: 100%;
				height: 100%;
				background: radial-gradient(circle var(--l-circle-trail-cap-size) at 50% var(--l-circle-trail-cap-size), currentColor, currentColor var(--l-circle-trail-cap-size), transparent);
				transform: rotate(var(--l-circle-trail-cap-start));
				&.end {
					transform: rotate(var(--l-circle-trail-cap-end))
				}
			}
		}
		&__stroke .cap{
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			background: radial-gradient(circle var(--l-circle-stroke-cap-size) at 50% var(--l-circle-stroke-cap-size), var(--l-circle-stroke-cap-color, currentColor), var(--l-circle-stroke-cap-color, currentColor) var(--l-circle-stroke-cap-size), transparent);
			transform: rotate(var(--l-circle-stroke-cap-start));
			&.end {
				transform: rotate(var(--l-circle-stroke-cap-end));
				color: var(--l-circle-stroke-cap-color-end, currentColor);
			}
		}
	}
}
.clockwise {
	transform: translateY(var(--l-circle-offset-top, 0)) scale(-1,1);
}
.clockwise .l-circle__inner{
	transform: scale(-1,1);
}

/*  #endif */