progress.bio-progress {
	appearance: none;
	border: 0px solid $color-dark;
	width: 100%;
	border-radius: 3px;
	overflow: hidden;

	&::-webkit-progress-bar {
		background-color: hsl(210, 10%, 91%);
	}

	&::-webkit-progress-value { background-color: $color-primary }
	&::-moz-progress-bar { background-color: $color-primary; }

	@each $key, $value in $components-colors {
		&.-#{$key} {
			&::-webkit-progress-value { background-color: $value }
			&::-moz-progress-bar { background-color: $value; }
		}
	};
}