@import './var';
.#{$prefix}progress {
	height: $progress-height;
	margin-bottom: $progress-height*4;
	min-width: 100px;
	background-color: $progress-color-base-bg;
	position: relative;
	border:none;
	border-radius: $progress-border-radius;
	color:$color-text;
}
.#{$prefix}progress__value {
	height:$progress-height;
	background: $progress-primary-color-bg;
	content: "";
	display: block;
    border-radius: $progress-border-radius;
	position: initial;
}
.#{$prefix}progress__text{
	display: block;
	position: absolute;
	font-size: $progress-font-size;
	line-height:$progress-line-height-fz-default;
	left: 0;
	top: 8px;
}
.#{$prefix}progress.#{$prefix}progress--succeed {
	border-color: $progress-success-color-border;
}
.#{$prefix}progress.#{$prefix}progress--succeed .#{$prefix}progress__value {
	background: $progress-success-color-bg;
}
.#{$prefix}progress.#{$prefix}progress--error {
	border-color: $progress-error-color-border;
}
.#{$prefix}progress.#{$prefix}progress--error .#{$prefix}progress__value {
	background: $progress-error-color-bg;
}


/* 环形进度条 */
.#{$prefix}progress-circle{margin:0 auto; text-align: center;}

.#{$prefix}progress-circle__area {
	display: inline-block;
	width:$progress-circle-width;
	height:$progress-circle-height;
	position: relative;
	// bottom:12px;
	margin-bottom: 12px;
	font-size: 0;
}
.#{$prefix}progress-circle__svg-path{
	width: 100%;
	height: 100%;
	transform: rotate(-90deg); transform-origin: center;
	-webkit-transform: rotate(270deg); -webkit-transform-origin: center;
	-moz-transform: rotate(270deg); -moz-transform-origin: center;
	-ms-transform: rotate(-90deg); -ms-transform-origin: center;
}
.#{$prefix}progress-circle__base-ring{  stroke:$progress-color-base-bg; }
.#{$prefix}progress-circle__current-ring{
    stroke-dasharray: 0 434px; stroke:$progress-primary-color-bg;
    stroke-dashoffset: 0px;/*-webkit-transition: all .5s ease;*/
}
.#{$prefix}progress-circle__area svg{
	width: 100%;
	height: 100%;
}
.#{$prefix}progress-circle__current-text{
	// font-family: qcloud-num;
	height:$progress-circle-height*50/160;
	line-height: $progress-circle-height*50/160;
	font-size:$progress-circle-height*48/160;
	color:$progress-color-base-text-weight;
	position: absolute;
	left:0;
	right:0;
	top:50%;
	margin-top:-($progress-circle-height*50/160)/2;
}
.#{$prefix}progress-circle__current-text .text--chinese{font-size: $progress-circle-height*24/160; display: inline-block; vertical-align: top; }
.#{$prefix}progress-circle__current-text .text--symbol{font-size: $progress-font-size-l; color:$progress-primary-color-text-label;}

.#{$prefix}progress-circle__tips{line-height: 1.5; font-size: $progress-font-size-l;color:$progress-primary-color-text-label;}

.#{$prefix}progress-circle.is-success .#{$prefix}progress-circle__current-ring{
	stroke:$progress-success-color-bg;  }
.#{$prefix}progress-circle.is-error .#{$prefix}progress-circle__current-ring{
	stroke:$progress-error-color-bg;  }

// .#{$prefix}progress-circle .progress-state{display: none; position: absolute; top:50%; left:50%; margin:-24px 0 0 -24px;}
// .#{$prefix}progress-circle .progress-state .check-mark{stroke:#0ABF5B; stroke-dashoffset: -60px; stroke-dasharray:60px;}
/*.#{$prefix}progress-circle.is-success .cur-text{display: none;}*/
/*.#{$prefix}progress-circle.is-success .progress-state{display: inline-block;}*/
// .#{$prefix}progress-circle.is-success .progress-state .check-mark{
// 	-webkit-animation:check-mark-anim .5s linear forwards;
// 	-moz-animation:check-mark-anim .5s linear forwards;
// 	-ms-animation:check-mark-anim .5s linear forwards;
// }

/*
@-webkit-keyframes check-mark-anim {
	100%{stroke-dashoffset: 0px;}
 }
@-moz-keyframes check-mark-anim {
	100%{stroke-dashoffset: 0px;}
}
@-ms-keyframes check-mark-anim {
	100%{stroke-dashoffset: 0px;}
}*/