@import "var";
.loop(@keyArray, @valueArray, @i: 1) when (@i =< length(@keyArray)) {
	@key: extract(@keyArray, @i);
	@value: extract(@valueArray, @i);
	.loop(@keyArray, @valueArray, (@i + 1));

	.@{prefixName}-progress{
		&.is-@{key} {
			.@{prefixName}-progress__bar-inner {
				background-color: @value;
			}
		}
		&.is-@{key}{
			&.@{prefixName}-progress--circle{
				.@{prefixName}-progress{
					&__bar{
						background-color: @value;
					}
					&__value{
						color: @value;
					}
				}
			}
		}
	}
}
.@{prefixName}-progress {
	display: flex;
	width: 100%;
	-webkit-box-align: center;
	align-items: center;
	&--circle{
		display: inline-block;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background-color: #ebf0ff;
		position: relative;
		overflow: hidden;
		&::before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 50%;
			bottom: 0;
			background-color: inherit;
			overflow: hidden;
			z-index: 2;
		}
		&::after{
			content: '';
			position: absolute;
			left: 4px;
			right: 4px;
			top: 4px;
			bottom: 4px;
			border-radius: 50%;
			overflow: hidden;
			background-color: inherit;
			box-sizing: border-box;
			z-index: 8;
		}
		.@{prefixName}-progress{
			&__bar{
				position: absolute;
				top: 0;
				left: 0;
				width: 50%;
				bottom: 0;
				height: 100%;
				border-top-left-radius: 40px;
				border-bottom-left-radius: 40px;
				transform-origin: right center;
				z-index: 1;
				&-inner{
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					border-top-left-radius: 40px;
					border-bottom-left-radius: 40px;
					overflow: hidden;
					background-color: inherit;
					transform-origin: right center;
					z-index: 1;
				}
			}
			&__value{
				position: absolute;
				z-index: 9;
				font-size: 16px;
				line-height: 24px;
				left: 50%;
				top: 50%;
				height: auto;
				margin: 0;
				display: inline-block;
				width: auto;
				transform: translate(-50%, -50%);
			}
			&__operate{
				display: none;
			}
		}
	}

	&__bar {
		flex: 1;
		height: 8rpx;
		background-color: @progress-background-color;

		&-inner {
			display: block;
			height: 100%;
			background-color: @progress-bar-background-color;
		}
	}

	&__value {
		display: inline-block;
		width: 70rpx;
		height: 100%;
		text-align: right;
		margin-left: @progress-gap;
		font-size: 26rpx;
	}

	&__operate {
		display: inline-block;
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		margin-left: @progress-gap;
		font-size: 0;
	}
}

.loop(@progress-status-key, @progress-status-value, 1);