//
// Progress bar Styles //
//
.progress-box {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
	h1,h2,h3,h4,h5,h6 {
		margin-bottom: 0;
	}
	.progress, 
	.progress-bar {
		height: 1px;
		box-shadow: none;
		border-radius: 0;
	}
	.progress {
		overflow: visible;
		background: $color-black-015;
		margin: 0;
		padding: 0;
		.progress-bar {
			overflow: visible;
			position: relative;
			background: $color-black-09;
			width: 30%;
			border: none;
			color: $color-black-09;
			span {
				position: absolute;
				top: -13px;
				right: 0;
				font-size: 14px;
				font-weight: $font-weight-regular;
			}
		}
		&.progress-radius {
			border-radius: 10px;
			.progress-bar { border-radius: 10px; }
		}
		&.progress-height-2px {
			height: 2px;
			.progress-bar { height: 2px; }
		}
		&.progress-height-3px {
			height: 3px;
			.progress-bar { height: 3px; }
		}
		&.progress-height-4px {
			height: 4px;
			.progress-bar { height: 4px; }
		}
		&.progress-height-5px {
			height: 5px;
			.progress-bar { height: 5px; }
		}
	}
}
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
	.progress-box {
		.progress {
			background: $color-white-02;
			.progress-bar {
				background: $color-white;
				color: $color-white;
			}
		}
	}
}