/**
 * Scroll Navigation Dots — Style 2: Line Ticks
 *
 * Each marker is a thin line / tick rather than a circle. The active tick
 * lengthens and switches to the accent colour, reading like a progress scale.
 * Adapts to vertical and horizontal placement.
 *
 * @package captain-widgets-kit
 * @since   1.6.0
 */

.captwiki-scrolldots.captwiki-style-2 .captwiki-scrolldots__marker {
	border-radius: 4px;
}

/* Vertical: horizontal ticks that grow wider when active. */
.captwiki-scrolldots.captwiki-style-2.captwiki-scrolldots--vertical .captwiki-scrolldots__marker {
	width: 22px;
	height: 3px;
}

.captwiki-scrolldots.captwiki-style-2.captwiki-scrolldots--vertical .captwiki-scrolldots__dot:hover .captwiki-scrolldots__marker {
	width: 30px;
	background: var( --captwiki-sd-accent );
}

.captwiki-scrolldots.captwiki-style-2.captwiki-scrolldots--vertical .captwiki-scrolldots__dot.is-active .captwiki-scrolldots__marker {
	width: 40px;
	background: var( --captwiki-sd-accent );
}

/* Horizontal: vertical ticks that grow taller when active. */
.captwiki-scrolldots.captwiki-style-2.captwiki-scrolldots--horizontal .captwiki-scrolldots__marker {
	width: 3px;
	height: 22px;
}

.captwiki-scrolldots.captwiki-style-2.captwiki-scrolldots--horizontal .captwiki-scrolldots__dot:hover .captwiki-scrolldots__marker {
	height: 30px;
	background: var( --captwiki-sd-accent );
}

.captwiki-scrolldots.captwiki-style-2.captwiki-scrolldots--horizontal .captwiki-scrolldots__dot.is-active .captwiki-scrolldots__marker {
	height: 40px;
	background: var( --captwiki-sd-accent );
}
