@import (reference) "global";

@trackBackgroundColor: rgb(229, 233, 242);
c-progress, .ui.progress {
	background-color: #fff !important;
	position: relative;
	margin: 0 !important;
	&.circle {
		> svg {
			display: block;
			path {
				&.track {
					stroke: @trackBackgroundColor;
					fill: none;
				}
				&.progress {
					stroke-linecap: round;
					stroke: @primaryColor;
					fill: none;
				}

			}
		}
		text {
			font-size: 1.5em;
			line-height: 1em;
			position: absolute;
			display: block;
			width: 100%;
			text-align: center;
			top: 50%;
			margin-top: -0.5em;

		}
		&.success, &.positive {
			> svg {
				path {
					&.track {
						stroke: transparent;
					}
					&.progress {
						stroke: @successColor;
					}
				}
			}
			> text {
				color: @successColor;
			}
		}
		&.exception, &.negative {
			> svg {
				path {
					&.track {
						stroke: transparent;
					}
					&.progress {
						stroke: @errorColor;
					}
				}
			}
			> text {
				color: @errorColor;
			}
		}
		&.warning {
			> svg {
				path {
					&.track {
						stroke: @warningBorderColor;
					}
					&.progress {
						stroke: @warningColor;
					}
				}
			}
			> text {
				color: @warningColor;
			}
		}
	}

	&.plain {
		text {
			display: none !important;
		}
		&:not(.circle) {
			height: 4px;
			> .track {
				top: 0;
				margin-top: 0;
				border-radius: 0;
				height: 4px;
				.progress {
					border-radius: 0;
					height: 4px;
				}
			}
		}
	}
	@basicProgressHeight: 1em;
	&:not(.circle) {
		height: 2em;

		> .track {
			border-radius: 0.5em;
			background-color: @trackBackgroundColor;
			height: @basicProgressHeight;
			.progress {
				border-radius: 0.5em;
				background-color: @primaryColor;

				height: @basicProgressHeight;
			}
			position: absolute;
			top: 50%;
			left: 0;
			right: 4em;
			margin-top: -@basicProgressHeight/2;
		}

		> text {
			position: absolute;
			right: 0px;
			top: 0px;
			width: 4em;
			transform: scale(0.85, 0.85);
			line-height: 2em;
		}

		&.inline {
			> .track {
				right: 0;
				margin-top: -@basicProgressHeight/2;
			}

			> text {
				width: initial;
				position: absolute;
				right: 50%;
				top: 0px;
				color: #fff;
				line-height: 2em;
				transform: scale(0.75, 0.75);
			}
		}

		&.success, &.positive {
			> .track {
				background-color: @positiveBorderColor;
				.progress {
					background-color: @positiveColor;
				}
				position: absolute;

			}
		}
		&.exception, &.negative {
			> .track {
				background-color: @negativeBorderColor;
				.progress {
					background-color: @negativeColor;
				}
			}
		}
		&.warning {
			> .track {
				background-color: @warningBorderColor;
				.progress {
					background-color: @warningColor;
				}
			}
		}
	}

	&.animated {
		&.circle {
			> svg path.progress {
				transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease;
			}
		}
		&:not(.circle) {
			> .track .progress {
				.transition(all .4s cubic-bezier(.08, .82, .17, 1) 0s);
			}
		}
	}

}