.progress-holder {
	height: 0.5rem;
	background-color: $color-neutral-15;
	overflow: hidden;

	@include flex;
	@include border-radius(0.25rem);

	> .progress-bar {
		width: 0px;
		background: linear-gradient(90deg, $color-red 0%, #7544dd 100%);
		@include border-radius(0.25rem);
		@include transition(width, $transition-function, 0.9s);
	}

	&.-contained {
		height: 1.125rem;
		padding: 0.3125rem;

		@include border-radius(0.5625rem);

		&.-thin {
			height: 0.875rem;

			@include border-radius(0.4375rem);
		}

		&.-bold {
			height: 1.375rem;

			@include border-radius(0.6875rem);
		}
	}

	&.-thin {
		height: 0.25rem;

		@include border-radius(0.125rem);

		> .progress-bar {

			@include border-radius(0.125rem);
		}
	}

	&.-bold {
		height: 0.75rem;

		@include border-radius(0.75rem);

		> .progress-bar {

			@include border-radius(0.375rem);
		}
	}
}

.minimal-scheme {

	.progress-holder,
	.progress-holder.-thin,
	.progress-holder.-bold {

		@include border-radius(0);

		> .progress-bar {

			@include border-radius(0);
		}
	}
}