<script lang="ts">
	export let value: number | undefined = undefined;
</script>

<div class="progress-bar" class:indeterminate={value == undefined} style="--value: {value}%">
	<div class="value" />
	<div class="label">
		<slot>
			{value ? Math.round(value) : '?'}%
		</slot>
	</div>
</div>

<style lang="scss">
	.progress-bar {
		width: 100%;
		height: 1em;
		background: white;
		position: relative;
	}

	.value {
		background: var(--primary);
		height: 100%;
		width: var(--value, 100%);
		transition: width 0.2s ease;
	}

	.progress-bar,
	.value {
		border-radius: 2px;
	}

	.label {
		font-size: 0.8em;
		color: white;
		z-index: 9;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		text-align: center;
		font-weight: bold;
		mix-blend-mode: difference;
	}

	.progress-bar.indeterminate {
		.value {
			animation-name: indeterminate;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			animation-timing-function: ease-in-out;
		}
	}

	@keyframes indeterminate {
		0% {
			background-color: var(--primary);
		}
		50% {
			background-color: var(--primary-lighter);
		}
		100% {
			background-color: var(--primary);
		}
	}
</style>
