progress-bar.scss

@import "../style/base";
@import "progress-bar-vars";

:host {
	height: $progress-bar-height;
	background: $progress-bar-bg;

	contain: strict;
	position: relative;
	display: block;
	overflow: hidden;
}

#progress {
	background: $progress-bar-color;
}

#buffer {
	background: $progress-bar-buffer-color;
}

:host([mode="indeterminate"]) {
	#progress {
		/*
			Due to a Safari issue we had to compromise and add elements to the DOM that we could animate
			instead of just animating the ::before and ::after parts.
		 */
		#before, #after {
			background-color: inherit;
			position: absolute;
			height: 100%;
			left: 0;
			top: 0;
			bottom: 0;

			animation-duration: $progress-bar-indeterminate-duration;
			animation-timing-function: $progress-bar-indeterminate-timing-function;
			animation-iteration-count: infinite;
		}

		#before {
			animation-name: indeterminate;
		}

		#after {
			animation-name: indeterminate-short;
			animation-delay: $progress-bar-indeterminate-short-delay;
		}
	}
}

:host([mode="determinate"]) #progress, #buffer {
	transition: $progress-bar-determinate-transition;

	transform-origin: top left;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

@keyframes indeterminate {
	0% {
		left: -35%;
		right: 100%;
	}
	60% {
		left: 100%;
		right: -90%;
	}
	100% {
		left: 100%;
		right: -90%;
	}
}

@keyframes indeterminate-short {
	0% {
		left: -200%;
		right: 100%;
	}
	60% {
		left: 107%;
		right: -8%;
	}
	100% {
		left: 107%;
		right: -8%;
	}
}