.roham-free-shipping-progress {
	--roham-free-shipping-progress-value: 0;

	position: relative;
	display: block;

	width: 100%;
	max-width: 100%;
	height: 15px;

	margin: 0;
	padding: 0;

	overflow: hidden;

	background:
		var(
			--e-global-color-background,
			#F3F4F5
		);

	border: 0;
	border-radius: 999px;

	isolation: isolate;
	contain: layout paint;
}

.roham-free-shipping-progress::before {
	content: "";

	position: absolute;

	top: 0;
	right: 0;
	bottom: 0;

	width:
		calc(
			var(
				--roham-free-shipping-progress-value,
				0
			) * 100%
		);

	height: 100%;

	background:
		linear-gradient(
			90deg,
			var(
				--e-global-color-secondary,
				#E30A58
			)
			0%,
			var(
				--e-global-color-primary,
				#FF753B
			)
			100%
		);

	border-radius: 999px;

	transition:
		width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		background 0.3s ease;

	will-change: width;
}

.roham-free-shipping-progress.is-complete::before {
	background:
		linear-gradient(
			90deg,
			#2FBF71 0%,
			#38C976 100%
		);
}

@media (max-width: 767px) {

	.roham-free-shipping-progress {
		height: 10px;
	}

}

@media (prefers-reduced-motion: reduce) {

	.roham-free-shipping-progress::before {
		transition: none;
	}

}