/**
 * Advanced Progress Bar — Style 4: Segmented
 *
 * The bar reads as a row of discrete blocks. A gap overlay ( painted in the
 * track colour ) sits above the fill and slices it into equal segments — the
 * count is controlled by the Segment Count style option.
 *
 * @package captain-widgets-kit
 * @since   1.6.0
 */

.captwiki-progress.captwiki-style-4 {
	--captwiki-pb-height: 18px;
}

.captwiki-progress.captwiki-style-4 .captwiki-progress__track {
	background: var( --captwiki-pb-track );
	border-radius: 6px;
}

.captwiki-progress.captwiki-style-4 .captwiki-progress__fill {
	background: var( --captwiki-pb-accent );
	border-radius: 6px;
}

/* Gap overlay carves the fill + track into equal blocks. */
.captwiki-progress.captwiki-style-4 .captwiki-progress__track::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: repeating-linear-gradient(
		to right,
		transparent 0,
		transparent calc( 100% / var( --captwiki-pb-segments ) - 4px ),
		var( --captwiki-pb-track ) calc( 100% / var( --captwiki-pb-segments ) - 4px ),
		var( --captwiki-pb-track ) calc( 100% / var( --captwiki-pb-segments ) )
	);
}
