.cl-progress {
	display: flex;
	align-items: center;
	min-height: 34rpx;

	&-bar {
		box-sizing: border-box;
		flex: 1;

		&__outer {
			border-radius: 50rpx;
			overflow: hidden;
			position: relative;
		}

		&__inner {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			background-color: $cl-color-primary;
			text-align: right;
			border-radius: 50rpx;
			line-height: 1;
			white-space: nowrap;
			transition: width 0.6s ease;
		}
	}

	&__text {
		display: inline-block;
		height: 34rpx;
		width: 100rpx;
		line-height: 34rpx;
		color: #606266;
		font-size: 24rpx;
		text-align: left;
		margin-left: 10rpx;
	}

	&__icon {
		font-size: 30rpx;
	}

	&.is-success {
		.cl-progress-bar__inner {
			background-color: $cl-color-success;
		}

		.cl-progress__text {
			color: $cl-color-success;
		}
	}

	&.is-warning {
		.cl-progress-bar__inner {
			background-color: $cl-color-warning;
		}

		.cl-progress__text {
			color: $cl-color-warning;
		}
	}

	&.is-error {
		.cl-progress-bar__inner {
			background-color: $cl-color-error;
		}

		.cl-progress__text {
			color: $cl-color-error;
		}
	}
}