/* Progress Bars */
.progress-bar {
	background: $color-primary;
	height: 1.2rem;
}

.progress {
	.progress-bar {
		box-shadow: none;
		border-radius: 4px;
		height: auto;
	}
}

.progress-bar-primary {
	background-color: $color-primary;
}

.progress-bar.progress-without-number[aria-valuenow="1"],
.progress-bar.progress-without-number[aria-valuenow="2"] {
  min-width: 0;
}

.progress-bar.progress-bar-primary[aria-valuenow="0"] {
	background: transparent;
}

// DARK
// -----------------------------------------------------------------------------
/* Progress bar default style */
.progress {
	background: #474453;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4) inset;
}

// LIGHT
// -----------------------------------------------------------------------------
/* Progress bar light style */
.progress.light {
	background: #f6f7f8;
	background-image: linear-gradient(#F6F7F8, #F6F7F8 10%, #f5f5f5 11%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}

html.dark {
	.progress.light {
		background: $dark-color-4;
		background-image: linear-gradient($dark-color-4, $dark-color-4 10%, $dark-color-3 11%);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
	}
}

// ROUNDEDNESS
// -----------------------------------------------------------------------------
/* Progress bar roundness generic */
.progress-squared {
	&,
	& .progress-bar {
		border-radius: 0 !important;
	}
}

// SIZES
// -----------------------------------------------------------------------------
/* Progress bar sizes */
.progress-xs {
	height: 7px;

	&,
	& .progress-bar {
		border-radius: 7px;
	}

	.progress-bar {
		direction: ltr !important;
		text-indent: -9999px;
	}

	&.progress-half-rounded {
		&,
		& .progress-bar {
			border-radius: floor(7px / 3);
		}
	}

	&.progress-striped {
		.progress-bar {
			background-size: 15px 15px;
		}
	}
}

.progress-sm {
	border-radius: 12px;
	height: 12px;

	&,
	& .progress-bar {
		border-radius: 12px;
	}

	.progress-bar {
		font-size: 10px;
		line-height: 12px;
	}

	&.progress-half-rounded {
		&,
		& .progress-bar {
			border-radius: floor(12px / 3);
		}
	}

	&.progress-striped {
		.progress-bar {
			background-size: 20px 20px;
		}
	}
}

.progress-md {
	border-radius: 14px;
	height: 14px;

	&,
	& .progress-bar {
		border-radius: 14px;
	}

	.progress-bar {
		font-size: 11px;
		line-height: 14px;
	}

	&.progress-half-rounded {
		&,
		& .progress-bar {
			border-radius: floor(14px / 3);
		}
	}


	&.progress-striped {
		.progress-bar {
			background-size: 25px 25px;
		}
	}
}

.progress-lg {
	border-radius: 16px;
	height: 16px;

	&,
	& .progress-bar {
		border-radius: 16px;
	}

	.progress-bar {
		line-height: 16px;
	}

	&.progress-half-rounded {
		&,
		& .progress-bar {
			border-radius: floor(16px / 3);
		}
	}

	&.progress-striped {
		.progress-bar {
			background-size: 30px 30px;
		}
	}
}

.progress-xl {
	border-radius: 18px;
	height: 18px;

	&,
	& .progress-bar {
		border-radius: 18px;
	}

	.progress-bar {
		line-height: 18px;
	}

	&.progress-half-rounded {
		&,
		& .progress-bar {
			border-radius: floor(18px / 3);
		}
	}

	&.progress-striped {
		.progress-bar {
			background-size: 35px 35px;
		}
	}
}

// STATES
// -----------------------------------------------------------------------------
/* Progress bar states */
@each $state in $states {
	.progress {
		.progress-bar-#{nth($state,1)} {
			background-color: #{nth($state,2)};
		}
	}
}

// CIRCULAR BAR
// -----------------------------------------------------------------------------
.circular-bar {
	margin-bottom: 25px;
	.circular-bar-chart {
		position: relative;
	}
	strong {
		display: block;
		font-weight: 600;
		font-size: 18px;
		line-height: 30px;
		position: absolute;
		top: 35%;
		width: 80%;
		left: 10%;
		text-align: center;
	}
	label {
		display: block;
		font-weight: 100;
		font-size: 17px;
		line-height: 20px;
		position: absolute;
		top: 50%;
		width: 80%;
		left: 10%;
		text-align: center;
	}
}