/**
 * Advanced Progress Bar — Style 5: Circular
 *
 * A radial conic-gradient ring meter with the percentage at its centre and the
 * title below. Multiple bars sit side by side and wrap responsively. The ring
 * blends from the accent to the secondary colour.
 *
 * @package captain-widgets-kit
 * @since   1.6.0
 */

.captwiki-progress.captwiki-style-5 .captwiki-progress__circle {
	background: conic-gradient(
		from 0deg,
		var( --captwiki-pb-accent ) 0,
		var( --captwiki-pb-accent-2 ) calc( var( --captwiki-pb-p, 0 ) * 1% ),
		var( --captwiki-pb-track ) 0
	);
}

.captwiki-progress.captwiki-style-5 .captwiki-progress__circle-wrap {
	filter: drop-shadow( 0 10px 22px color-mix( in srgb, var( --captwiki-pb-accent ) 28%, transparent ) );
}

.captwiki-progress.captwiki-style-5 .captwiki-progress__label {
	font-size: 16px;
	font-weight: 700;
	color: #1f2937;
}

.captwiki-progress.captwiki-style-5 .captwiki-progress__percent {
	background: linear-gradient( 135deg, var( --captwiki-pb-accent ), var( --captwiki-pb-accent-2 ) );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
