/*
 * PureCSS.com
 * https://purecss.com/examples/progress-bar/
 * Animated progress bars using the <progress> element and CSS.
 */

.demo-progress-bar .progress-row {
		display: flex;
		align-items: center;
		gap: 1rem;
		margin: .5rem 0;
	}

.demo-progress-bar .progress-label {
		font-size: .85rem;
		color: var(--text-muted);
		width: 60px;
		flex-shrink: 0;
	}

.demo-progress-bar progress {
		-webkit-appearance: none;
		appearance: none;
		flex: 1;
		height: 10px;
		border: none;
		border-radius: 999px;
		overflow: hidden;
	}

:is(.demo-progress-bar progress)::-webkit-progress-bar {
			background: var(--surface-2);
			border-radius: 999px;
		}

:is(.demo-progress-bar progress)::-webkit-progress-value {
			background: var(--accent);
			border-radius: 999px;
			transition: width .3s;
		}

:is(.demo-progress-bar progress)::-moz-progress-bar {
			background: var(--accent);
			border-radius: 999px;
		}

.success:is(.demo-progress-bar progress)::-webkit-progress-value {
			background: var(--teal);
		}

.warning:is(.demo-progress-bar progress)::-webkit-progress-value {
			background: var(--orange);
		}

.danger:is(.demo-progress-bar progress)::-webkit-progress-value {
			background: var(--coral);
		}

.success:is(.demo-progress-bar progress)::-moz-progress-bar { background: var(--teal); }

.warning:is(.demo-progress-bar progress)::-moz-progress-bar { background: var(--orange); }

.danger:is(.demo-progress-bar progress)::-moz-progress-bar  { background: var(--coral); }

.shimmer:is(.demo-progress-bar progress)::-webkit-progress-value {
			background: linear-gradient(90deg,
				var(--accent) 30%,
				rgba(255,255,255,.3) 50%,
				var(--accent) 70%
			);
			background-size: 200% 100%;
			animation: progress-shimmer 1.4s linear infinite;
		}

.shimmer:is(.demo-progress-bar progress)::-moz-progress-bar {
			background: linear-gradient(90deg,
				var(--accent) 30%,
				rgba(255,255,255,.3) 50%,
				var(--accent) 70%
			);
			background-size: 200% 100%;
			animation: progress-shimmer 1.4s linear infinite;
		}

@keyframes progress-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}