/*
	Mixin for the progress element. 
	Parameters:
	- $progress-name          : The class name of the progress wrapper.
	- $progress-height        :	The height of the progress wrapper.
	- $progress-border-radius :	The border radius of the progress wrapper.
	- $progress-bg-color      :	The background color of the progress wrapper. [1]
	- $progress-font-size     : The font size of the progress bar's text (if any).
	- $progress-bar-color     : The progress bar's text color.
	- $progress-bar-bg-color  :	The progress bar's background color.
	Notes:
	- [1] : The background color of the progress wrapper should be a different color than the
		page's background to make sure that it is visible. 
	- [2] : This only creates a basic progress style. For more progress bar styles use `make-progress-bar-variant`.
*/
@mixin make-progress(	$progress-name, $progress-height, $progress-border-radius, $progress-bg-color,
						$progress-font-size, $progress-bar-color, $progress-bar-bg-color				){
	.#{$progress-name}{
		position: relative;
		overflow: hidden;
		height: $progress-height;
		background-color: $progress-bg-color;
		border-radius: $progress-border-radius;
		& > span{
			float: left;
			width: 0;
			height: 100%;
			background-color: $progress-bar-bg-color;
			text-align: center;
			font-size: $progress-font-size;
			color: $progress-bar-color;
		}
	}
}
/*
	Mixin for progress bar styles. 
	Parameters:
	- $progress-name                : 	The class name of the progress wrapper. [1]
	- $progress-bar-variant-name    :	The class name of the progress bar variant.
	- $progress-bar-variant-color   :	The progress bar variant's text color.
	- $progress-bar-variant-bg-coor :	The progress bar variant's background color.
	Notes:
	- [1] : The name of $progress-name should match the one specified in `make-progress` for the
		progress bar variant to work correctly.
	- [2] : This mixin should be used in combination with `make-progress` and is suggested that you 
		use it after `make-progress`.
*/
@mixin make-progress-bar-variant($progress-name, $progress-bar-variant-name, $progress-bar-variant-color, $progress-bar-variant-bg-color){
	.#{$progress-name} > span.#{$progress-bar-variant-name}{
		background-color: $progress-bar-variant-bg-color;
		color: $progress-bar-variant-color;
	}
}