/*!
 * Salient Pill Scrollbar Pagination v1.1.0
 * Values here are defaults; Settings → Pill Pagination overrides them.
 */

/* Hide the stock dots once the pill has taken over. */
.nectar-flickity.has-pill-scrollbar:not(.pill-scrollbar-inactive) .flickity-page-dots {
	display: none !important;
}

.nectar-flickity .nectar-pill-scrollbar {
	--nps-color: currentColor;          /* follows the carousel's Control Coloring */
	--nps-width: 190px;
	--nps-height: 44px;
	--nps-padding: 20px;
	--nps-track-height: 6px;
	--nps-track-height-active: 8px;
	--nps-roundness: 1;                 /* 1 = full pill, 0 = square */
	--nps-bottom: -92px;                /* Salient's dot position */

	/* Strength of each part when colours follow Control Coloring */
	--nps-pill-alpha: 10%;
	--nps-track-alpha: 20%;
	--nps-thumb-alpha: 62%;
	--nps-thumb-active-alpha: 92%;

	/* Fallbacks for browsers without color-mix() */
	--nps-pill-bg: rgba(128, 128, 128, 0.14);
	--nps-track-bg: rgba(128, 128, 128, 0.28);
	--nps-thumb-bg: var(--nps-color);
	--nps-thumb-bg-active: var(--nps-color);

	position: absolute;
	left: 50%;
	bottom: var(--nps-bottom);
	z-index: 10;
	transform: translateX(-50%);

	display: flex;
	align-items: center;
	gap: 14px;
	box-sizing: border-box;
	width: var(--nps-width);
	max-width: calc(100% - 20px);
	height: var(--nps-height);
	padding: 0 var(--nps-padding);
	margin: 0;
	border-radius: calc(var(--nps-height) / 2 * var(--nps-roundness));
	background: var(--nps-pill-bg);

	cursor: pointer;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.25s ease;
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.nectar-flickity .nectar-pill-scrollbar {
		--nps-pill-bg: color-mix(in srgb, var(--nps-color) var(--nps-pill-alpha), transparent);
		--nps-track-bg: color-mix(in srgb, var(--nps-color) var(--nps-track-alpha), transparent);
		--nps-thumb-bg: color-mix(in srgb, var(--nps-color) var(--nps-thumb-alpha), transparent);
		--nps-thumb-bg-active: color-mix(in srgb, var(--nps-color) var(--nps-thumb-active-alpha), transparent);
	}
}

.nectar-flickity .nectar-pill-scrollbar[hidden] {
	display: none !important;
}

.nectar-pill-scrollbar .nps-track {
	position: relative;
	flex: 1 1 auto;
	height: var(--nps-track-height);
	border-radius: calc(var(--nps-track-height-active) / 2 * var(--nps-roundness));
	background: var(--nps-track-bg);
	transition: height 0.2s ease;
}

.nectar-pill-scrollbar .nps-thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 20%;
	height: 100%;
	border-radius: inherit;
	background: var(--nps-thumb-bg);
	cursor: grab;
	will-change: transform;
	transition: background-color 0.2s ease;
}

.flickity-rtl .nectar-pill-scrollbar .nps-thumb {
	left: auto;
	right: 0;
}

.nectar-pill-scrollbar .nps-count {
	flex: 0 0 auto;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--nps-thumb-bg-active);
}

/* Hover / drag feedback */
.nectar-pill-scrollbar:hover .nps-track,
.nectar-pill-scrollbar.is-scrubbing .nps-track {
	height: var(--nps-track-height-active);
}

.nectar-pill-scrollbar:hover .nps-thumb,
.nectar-pill-scrollbar.is-scrubbing .nps-thumb {
	background: var(--nps-thumb-bg-active);
}

.nectar-pill-scrollbar.is-scrubbing,
.nectar-pill-scrollbar.is-scrubbing .nps-thumb {
	cursor: grabbing;
}

.nectar-pill-scrollbar:focus {
	outline: none;
}

.nectar-pill-scrollbar:focus-visible:not(.is-scrubbing) {
	outline: 2px solid var(--nps-color);
	outline-offset: 3px;
}

/* Carousel "Pagination Alignment" setting */
.nectar-flickity[data-pagination-alignment="left"] .nectar-pill-scrollbar {
	left: 0;
	transform: none;
}

.nectar-flickity[data-pagination-alignment="right"] .nectar-pill-scrollbar {
	left: auto;
	right: 0;
	transform: none;
}

/* Carousel "Control Coloring" setting → Salient global colours */
.nectar-flickity[data-control-color="accent-color"] .nectar-pill-scrollbar {
	--nps-color: var(--nectar-accent-color, currentColor);
}
.nectar-flickity[data-control-color="extra-color-1"] .nectar-pill-scrollbar {
	--nps-color: var(--nectar-extra-color-1, currentColor);
}
.nectar-flickity[data-control-color="extra-color-2"] .nectar-pill-scrollbar {
	--nps-color: var(--nectar-extra-color-2, currentColor);
}
.nectar-flickity[data-control-color="extra-color-3"] .nectar-pill-scrollbar {
	--nps-color: var(--nectar-extra-color-3, currentColor);
}

@media only screen and (max-width: 690px) {
	.nectar-flickity .nectar-pill-scrollbar {
		--nps-width: 160px;
		--nps-height: 40px;
		--nps-padding: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nectar-pill-scrollbar,
	.nectar-pill-scrollbar .nps-track,
	.nectar-pill-scrollbar .nps-thumb {
		transition: none;
	}
}