src/components/OperationCard.sass
.OperationCard
	--height: 3.3em
	position: relative
	width: 100%
	height: var(--height)
	background: var(--variant-o200)
	border-radius: var(--border-radius)
	transition: background 33ms linear
	text-shadow: 1px 1px 0 var(--bottom)
	outline-offset: -4px

	&:hover
		background: var(--variant-o300)

		> header > .actions
			display: flex

	> *
		position: relative
		z-index: 2

	> .progress
		+absolute(0 _ _ 0)
		z-index: 1
		height: 100%
		background: var(--info-o400)
		border-radius: var(--border-radius)

		&.-indeterminate
			background-image: linear-gradient(-45deg, #ffffff08 25%, #00000008 25%, #00000008 50%, #ffffff08 50%, #ffffff08 75%, #00000008 75%, #00000008)
			background-size: 40px 40px
			animation: Progress-move 600ms linear infinite

			&:is(html[data-freeze-animations=true] *)
				animation: none

	&:has(> .actions > :nth-child(1))
		--buttons: 1

		> .content
			--button-width: calc(var(--height) - 4px)
			--fade-start: calc(100% - (2px + (var(--button-width) * (var(--buttons) + 1.25))))
			--fade-end: calc(var(--fade-start) + var(--button-width))
			mask-image: linear-gradient(to right, white, white var(--fade-start), transparent var(--fade-end))

	&:has(> .actions > :nth-child(2))
		--buttons: 2

	&:has(> .actions > :nth-child(3))
		--buttons: 3

	> .content
		display: flex
		flex-flow: column
		align-items: stretch
		justify-content: center
		+size(100%)
		padding: 0 var(--spacing-three-quarters)

		> header
			grid-area: title
			min-width: 0
			display: flex
			align-items: center
			gap: var(--spacing-half)

			> .OperationTitle
				flex: 1 1 auto
				font-weight: bold

			> .stage
				display: block
				flex: 0 1 auto
				min-width: 0
				font-size: calc(var(--font-size) - 1px)
				font-family: var(--font-code)
				font-style: italic
				+ellipsis()

			> .state
				font-family: var(--font-code)
				font-style: italic

			> .percent
				font-family: var(--font-code)
				font-weight: bold

		> .meta
			grid-area: meta
			min-width: 0
			display: flex
			align-items: center
			gap: var(--spacing-half)
			margin-top: -0.2em
			color: var(--variant-z900)

			> *
				flex: 0 0 auto

			> .spacer
				flex: 1 1 0

			> .iconValue
				display: flex
				align-items: center
				gap: .2em
				font-family: var(--font-code)
				opacity: .8

			> .profile
				display: block
				flex: 0 1 auto
				border-right: 1px solid var(--variant-o300)
				padding-right: var(--spacing-half)
				min-width: 0
				+ellipsis()

				> .Icon
					vertical-align: bottom
					margin-right: 0.1em

			.Icon
				font-size: 0.9em
				opacity: .8

	> .actions
		+absolute(0 0 _ _)
		flex: 0 0 auto
		display: flex
		height: var(--height)
		width: max-content

		> .Button
			position: relative
			outline-offset: -4px
			height: var(--height)
			aspect-ratio: 1/1

			> .Icon
				+size(1.8em)
