/** @section Progress Bars */


.progress-linear {
	position: relative;
	text-align: left;

	.progress-header {
		text-transform: uppercase;
		font-weight: 600;
		font-family: $font-family-sec;
		color: $gray-17;
		letter-spacing: .05em;
	}

	.progress-body {
		display: flex;
		align-items: center;
	}

	* + .progress-body { margin-top: 12px; }

	.progress-bar-linear-wrap {
		flex-grow: 1;
		margin-right: 15px;
		height: 10px;
		background: $gray-200;
	}

	.progress-bar-linear {
		width: 0;
		height: inherit;
		background: $primary;
		transition: .5s all ease-in-out;
	}

	.progress-value {
		color: $gray-17;
		&::after {
			content: "%";
		}
	}
}

* + .progress-bar-linear-wrap {
	margin-top: 8px;
}

.progress-linear + .progress-linear {
	margin-top: 13px;
}

@include media-breakpoint-up(lg) {
	.progress-linear + .progress-linear {
		margin-top: 17px;
	}
}


/** @section Progress Circle */


.progress-circle {
	display: inline-block;
	text-align: center;
	line-height: 1.2;
}

.progress-circle-block { position: relative; }

.progress-circle-bg {
	fill: transparent;
	stroke: $gray-100;
	stroke-width: 3px;
}

.progress-circle-fg {
	fill: transparent;
	stroke: $primary;
	stroke-width: 3px;
}

.progress-circle-counter {
	position: absolute;
	top: 50%;
	left: 51%;
	font-size: 40px;
	line-height: 40px;
	transform: translate(-50%, -50%);
	color: $gray-1;
	font-weight: 300;

	&::after { content: "%"; }
}

.progress-circle-title {
	font-size: 14px;
	letter-spacing: .05em;
	text-transform: uppercase;
}

* + .progress-circle-title { margin-top: 20px; }