/* PayPal Donation
---------------------------------------- */

/* Progress bar */
.ppde-progress {
	--ppde-progress-height: clamp(16px, 2vw, 26px);
	--ppde-border-radius: 13px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.progress-value {
	flex: 0 0 8ch;
	font-size: 12px;
	font-weight: bold;
	border-radius: var(--ppde-border-radius);
	padding: 1px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.progress-grey {
	background: #333333;
	background: linear-gradient(to bottom, #333333 0%, #666666 100%);
	border-radius: var(--ppde-border-radius);
	box-shadow: 0 2px 0 rgba(109, 109, 109, 0.3);
	flex: 1;
	min-height: var(--ppde-progress-height);
	overflow: hidden;
}

.progress-color {
	--ppde-bg-saturation: 100%;
	--ppde-bg-lightness: 40%;
	--ppde-calc-width: calc(var(--ppde-progress-val, 0) * 1%);
	--ppde-bg-hue: min(calc(var(--ppde-progress-val, 0) * 1.2), 120);
	--ppde-bg-hsl: hsl(var(--ppde-bg-hue), var(--ppde-bg-saturation), var(--ppde-bg-lightness));
	border-radius: var(--ppde-border-radius, 13px);
	box-shadow:
			inset 0 10px 10px rgba(255, 255, 255, 0.3),
			inset 0 -10px 10px rgba(0, 0, 0, 0.5);
	position: relative;
	height: var(--ppde-progress-height, 20px);
	width: min(var(--ppde-calc-width), 100%);
	background-color: var(--ppde-bg-hsl);
	overflow: hidden;
	animation: ppde-move-start-to-end 2s;
}

.progress-used {
	--ppde-bg-hue: max(calc(120 - var(--ppde-progress-val, 0) * 1.2), 0);
	--ppde-animation-hue-from: 120;
}

.rtl {
	--ppde-gradient-angle: 45deg;
}

.progress-color:before {
	background-image: linear-gradient(var(--ppde-gradient-angle, -45deg), rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
	background-size: var(--ppde-progress-height) var(--ppde-progress-height);
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: "";
}

/* Text donation stats */
.donation-stats {
	text-align: center;
	margin-top: 10px;
}

/* form displaying */
.donate_value {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

.donate_value strong {
	vertical-align: middle;
	margin-left: 6px;
}

#ppde-amount {
	width: 120px;
	text-align: right;
	vertical-align: middle;
}

#ppde-donate {
	max-width: 500px;
	margin: 0 auto;
}

#ppde-paypal-button-container {
	width: 100%;
}

#ppde-error {
	max-width: 500px;
	margin: 0 auto 15px;
}

/* Don't animate progress bar according to user's preference (accessibility) */
@media (prefers-reduced-motion: reduce) {
	.progress-color {
		animation: none;
	}
}

/* Animation keyframes */
@keyframes ppde-move-start-to-end {
	from {
		width: 0;
		background-color: hsl(var(--ppde-animation-hue-from, 0), var(--ppde-bg-saturation), var(--ppde-bg-lightness));
	}

	to {
		width: min(var(--ppde-calc-width), 100%);
		background-color: var(--ppde-bg-hsl);
	}
}