/* ==========================================================================
   文章进度条 · 前台样式
   全部尺寸/颜色由每条进度条上的 CSS 变量控制，这里只负责排版
   ========================================================================== */

.wpb-progress {
	margin: 1.4em 0;
	--wpb-track: #eef1f5;
	--wpb-w: 100%;
	max-width: var(--wpb-w, 100%);
	font-size: 14px;
	line-height: 1.4;
}

/* 标签行 */
.wpb-progress .wpb-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 6px;
}

.wpb-progress .wpb-text {
	font-weight: 600;
}

.wpb-progress .wpb-value {
	font-variant-numeric: tabular-nums;
	opacity: .72;
	font-size: .9em;
	white-space: nowrap;
}

/* 底槽 */
.wpb-progress .wpb-track {
	height: var(--wpb-h, 14px);
	background: var(--wpb-track);
	border-radius: var(--wpb-r, 7px);
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07);
}

/* 填充条 */
.wpb-progress .wpb-bar {
	height: 100%;
	width: var(--wpb-bar, 0%);
	min-width: 2px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 55%), var(--wpb-color, #00aeec);
	border-radius: var(--wpb-r, 7px);
	position: relative;
	transition: width .6s cubic-bezier(.22, .61, .36, 1);
}

/* 条内数字 */
.wpb-progress .wpb-bar .wpb-bar-label {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* 条纹流动动画（animate=1） */
.wpb-progress[data-animate="1"] .wpb-bar {
	background-image:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, .25) 0 9px, rgba(255, 255, 255, 0) 9px 18px),
		linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 55%);
	background-size: 26px 100%, auto;
	animation: wpb-slide 1.1s linear infinite;
}

@keyframes wpb-slide {
	to {
		background-position: 26px 0, 0 0;
	}
}

/* 暗色主题（跟随主题 body.dark） */
body.dark .wpb-progress {
	--wpb-track: rgba(255, 255, 255, .14);
}

body.dark .wpb-progress .wpb-track {
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

/* 短代码落在居中段落等场景时不要被主题拉成整行文本样式 */
.wpb-progress p:empty {
	display: none;
}