/* #ifndef APP */
@supports(background: conic-gradient(#000, #fff)) {
	.check {
		height: 1rpx;
		position: absolute;
	}
}

$size: 12rpx;
$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;
}

.l-circle {
	--l-circle-percent: 0%;
	transition-property: --l-circle-percent2,--l-circle-percent;
	transition-duration: 300ms;
	
	position: relative;
	display: inline-flex;
	&__canvas {
		width: 100%;
		height: 100%;
	}
	&__inner{
		position: absolute;
		flex: 1;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		align-items: center;
		justify-content: center;
	}
	&__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);
	}
}

.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 */

/* #ifdef APP */
.l-circle {
		// background-color: red;
		&__inner {
			flex: 1;
			align-items: center;
			justify-content: center;
			// background-color: aqua;
		}
	}

	.clockwise {
		transform: scale(-1, 1);
	}
/*  #endif */