/* <progress> element */
.ipsProgress{
	--_bo-ra: 50px;
	--_progress: var(--i-primary);
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: color-mix(in srgb, var(--i-co) 15%, transparent);
	border-radius: var(--_bo-ra);
	width: 100%;
	height: 10px;
	display: block;

	/* Useful for non-full widths */
	margin-left: auto;
	margin-right: auto;
}

.ipsProgress::-moz-progress-bar {
	border-radius: var(--_bo-ra);
	background: var(--_progress);
}
.ipsProgress::-webkit-progress-bar {
	background: none;
}
.ipsProgress::-webkit-progress-value {
	border-radius: var(--_bo-ra);
	background: var(--_progress);
}


@keyframes progress-bar-stripes {
	from { background-position: 40px 0; }
	to { background-position: 0 0; }
}

/* We sometimes use div/span elements so we can show the progress percentage */
.ipsProgress:not(progress){
	height: 1.6em;
	font-size: 12px;
	border-radius: 6px;
	overflow: hidden;
}

	.ipsProgress__progress {
		display: flex;
		align-items: center;
		width: 0;
		height: 100%;
		color: var(--i-primary-contrast);
		text-align: end;
		background-color: var(--_progress);
		position: relative;
		white-space: nowrap;
		text-indent: 6px;
		padding-inline-end: 2px;
	}

	.ipsProgress--animated .ipsProgress__progress {
		background-image: linear-gradient(45deg, hsl(0 0% 100% / .15) 25%, transparent 25%, transparent 50%, hsl(0 0% 100% / .15) 50%, hsl(0 0% 100% / .15) 75%, transparent 75%, transparent);
		background-size: 40px 40px;
		animation: progress-bar-stripes 2s linear infinite;
	}
	
	.ipsProgress--warning .ipsProgress__progress {
		background-color: #c05454;
	}

	.ipsProgress__progress[data-progress]::after {
		color: #fff;
		content: attr(data-progress);
		display: block;
		inset-inline-end: 5px;
		position: absolute;
	}

	.ipsProgress__progress[data-progress="0%"]{
		display: none;
	}

.ipsMeter {
	display: block;
	background: color-mix(in srgb, var(--i-co) 15%, transparent);
	border-radius: 4px;
	width: 100%;
	height: .8em;
	overflow: hidden;
}

	/* Safari requires appearance: none for styling. But if this is applied in Chrome, the inner bars don't work (potential bug), so the below hack applies it to Safari only */
	@supports (stroke-color:transparent) {
		.ipsMeter{
			appearance: none;
		}
	}


	.ipsMeter::-webkit-meter-optimum-value{
		background: var(--i-primary);
	}

	.ipsMeter::-webkit-meter-bar{
		background: transparent;
		border-width: 0;
		height: .8em;
	}

	.ipsMeter::-webkit-meter-suboptimum-value{
		background: var(--i-color_negative);
	}

	.ipsMeter::-moz-meter-bar{
		background: var(--i-primary);
	}	

	.ipsMeter > span {
		background: var(--i-primary);
		width: 0;
		display: block;
		height: inherit;
	}

	.ipsImageAttach .ipsMeter {
		width: 70%;
		position: absolute;
		top: 45%;
		margin-inline-start: -35%;
		inset-inline-start: 50%;
	}