/* H-Lead Carousel Nav — dot pagination (16x16 dots, active dot an 82x16 pill) */

.hl-carousel-nav {
	display: inline-flex;
	align-items: center;
	gap: var(--hl-space-12);
}

.hl-carousel-nav__dot {
	width: var(--hl-space-16);
	height: var(--hl-space-16);
	border-radius: var(--hl-radius-9999);
	border: none;
	padding: 0;
	background-color: var(--hl-color-brand-100);
	cursor: pointer;
	transition: width 0.2s ease, background-color 0.2s ease;
}

.hl-carousel-nav__dot--active {
	width: 82px;
	background-color: var(--hl-color-brand-800);
}