@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;

$infinite-indicator-ratio: 3;
$infinite-indicator-width: calc(100% / $infinite-indicator-ratio);

@keyframes infinite-progression-keyframes {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(100% * $infinite-indicator-ratio);
	}
}

.progress {
	height: 5px;
	width: 100%;

	&.fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	&.hidden {
		display: none;
	}

	.progress-percent {
		background: tokens.$coral-color-success-background-strong;
		height: 100%;
		transition: width 200ms ease;
		overflow: hidden;

		.infinite-indicator {
			height: 100%;
			background: tokens.$coral-color-neutral-background;
			position: relative;
			width: $infinite-indicator-width;
			animation-fill-mode: forwards;
			animation: infinite-progression-keyframes 2s infinite;
			animation-timing-function: linear;
		}
	}
}

:global(.modal-header) .progress {
	flex-grow: 0;
	flex-shrink: 0;
	position: relative;
	margin-top: -1px;
	margin-bottom: 0;
	border-radius: 0;
	box-shadow: none;
	height: 5px;
	background-color: transparent;

	:global(.progress-bar) {
		background-color: tokens.$coral-color-success-background-strong;
		box-shadow: none;
	}
}