@require '~styles/variables'
@require '~styles-lib/mixins'

@keyframes progress-bar-stripes
	from
		background-position: 40px 0

	to
		background-position: 0 0

.progress
	text-overflow()
	rounded-corners()
	change-bg('fg-muted')
	position: relative
	height: $line-height-computed
	line-height: $line-height-computed
	margin-bottom: $line-height-computed

.-text
	theme-prop('color', 'highlight-fg')
	position: relative
	display: inline-block
	vertical-align: middle
	font-size: $font-size-small
	padding: 0 10px

.progress-bar
	rounded-corners()
	change-bg('highlight')
	position: absolute
	top: 0
	left: 0
	width: 0
	min-width: 5px
	height: 100%

	.progress.animate &
		transition: width 600ms ease
		will-change: width

.progress-bar + .progress-bar
	theme-prop('border-left-color', 'fg-muted')
	border-left-width: $border-width-base
	border-left-style: solid

.progress-thin
	&, .progress-bar
		height: 5px

.progress-striped .progress-bar, .progress-bar.progress-striped
	background-image: linear-gradient(45deg, var(--theme-fg-muted) 25%, transparent 25%, transparent 50%, var(--theme-fg-muted) 50%, var(--theme-fg-muted) 75%, transparent 75%, transparent)
	background-size: 40px 40px

.progress.active .progress-bar, .progress-bar.active
	animation: progress-bar-stripes 2s linear infinite
