/**
 * Scroll Navigation Dots — Style 4: Numbered Pills
 *
 * Each dot is a numbered circle. Inactive dots show an outlined number; the
 * active dot fills with the accent colour, flips the number to white and lifts
 * with a soft shadow.
 *
 * @package captain-widgets-kit
 * @since   1.6.0
 */

.captwiki-scrolldots.captwiki-style-4 .captwiki-scrolldots__marker {
	width: 32px;
	height: 32px;
	background: transparent;
	border: 2px solid var( --captwiki-sd-color );
}

.captwiki-scrolldots.captwiki-style-4 .captwiki-scrolldots__num {
	opacity: 1;
	color: var( --captwiki-sd-color );
}

.captwiki-scrolldots.captwiki-style-4 .captwiki-scrolldots__dot:hover .captwiki-scrolldots__marker {
	border-color: var( --captwiki-sd-accent );
}

.captwiki-scrolldots.captwiki-style-4 .captwiki-scrolldots__dot:hover .captwiki-scrolldots__num {
	color: var( --captwiki-sd-accent );
}

.captwiki-scrolldots.captwiki-style-4 .captwiki-scrolldots__dot.is-active .captwiki-scrolldots__marker {
	background: var( --captwiki-sd-accent );
	border-color: var( --captwiki-sd-accent );
	box-shadow: 0 8px 16px -6px var( --captwiki-sd-accent );
	transform: scale( 1.08 );
}

.captwiki-scrolldots.captwiki-style-4 .captwiki-scrolldots__dot.is-active .captwiki-scrolldots__num {
	color: #ffffff;
}
