src/components/Progress.sass
.Progress
	--padding-h: var(--spacing-half)
	padding: 0
	position: relative
	background: var(--grey-z200)
	border-radius: var(--border-radius)
	height: var(--input-height)
	font-family: var(--font-code)

	// So that background doesn't peak through rounded corners
	&:where(.-round-more-left)
		border-top-left-radius: calc(var(--border-radius) + 2px)
		border-bottom-left-radius: calc(var(--border-radius) + 2px)
	&:where(.-round-more-right)
		border-top-right-radius: calc(var(--border-radius) + 2px)
		border-bottom-right-radius: calc(var(--border-radius) + 2px)

	> *
		position: relative
		z-index: 2
		+ellipsis()

	> .labels
		z-index: 1
		+absolute(0 _ _ 0)
		+size(100%)
		display: grid
		grid-template-columns: 1fr auto 1fr
		grid-template-rows: 1fr
		align-items: center
		gap: var(--spacing-half)
		grid-template-areas: "left center right"
		padding: 0 var(--padding-h)
		color: var(--fg)

		> *
			+ellipsis()

		> .center
			grid-area: center
			text-align: center

		> .left
			grid-area: left
			text-align: left

		> .right
			grid-area: right
			text-align: right

	> .bar
		z-index: 2
		+absolute(0 _ _ 0)
		+size(100%)
		color: var(--variant-fg)
		background-color: var(--variant)

	&.-transparent
		background-color: transparent

	&.-indeterminate > .bar
		transition: none
		background-image: linear-gradient(-45deg, #fff1 25%, #0001 25%, #0001 50%, #fff1 50%, #fff1 75%, #0001 75%, #0001)
		background-size: 40px 40px
		animation: Progress-move 600ms linear infinite

	&:is(.-indeterminate.-paused, html[data-freeze-animations=true] *) > .bar
		animation: none

@keyframes Progress-move
	0%
		background-position: 0 40px
	100%
		background-position: 0 0
