// Dot styles (set in Gutenslider Pro, drawn by the free stylesheet so a
// lapsed license never changes a slider):
// - dot-style-pill: the active dot stretches into a pill; the old one
//   shrinks back while the new one grows, so the highlight slides over.
// - dot-style-line: short lines; the active one fills up, with the autoplay
//   delay when autoplay runs (--gs-dot-progress, set by the view script).

.wp-block-eedee-block-gutenslider {
	// On the pagination: the dot size variables live on .eedee-swiper-outer
	// (or on the block in "fixed content" mode).
	.eedee-gutenslider-pagination {
		--gs-dot-h: max(6px, calc(var(--gutenslider-dot-size-sm) - 14px));
		--gs-dot-ease: cubic-bezier(0.65, 0, 0.35, 1);
		--gs-dot-time: 0.45s;

		@media only screen and (min-width: 601px) and (max-width: 960px) {
			--gs-dot-h: max(6px, calc(var(--gutenslider-dot-size-md) - 14px));
		}

		@media only screen and (min-width: 961px) {
			--gs-dot-h: max(6px, calc(var(--gutenslider-dot-size) - 14px));
		}
	}

	// Pill
	&.dot-style-pill
	.eedee-gutenslider-pagination:not(.swiper-pagination-bullets-dynamic)
	.swiper-pagination-bullet {
		width: var(--gs-dot-h);
		height: var(--gs-dot-h);
		border-radius: 999px;
		vertical-align: middle;
		opacity: 0.4;
		transition:
			width var(--gs-dot-time) var(--gs-dot-ease),
			height var(--gs-dot-time) var(--gs-dot-ease),
			opacity var(--gs-dot-time) var(--gs-dot-ease);

		&:hover {
			opacity: 0.7;
		}

		&.swiper-pagination-bullet-active {
			width: calc(var(--gs-dot-h) * 3);
			opacity: 1;
		}
	}

	&.dot-style-pill:is(.dot-position-left, .dot-position-right)
	.eedee-gutenslider-pagination:not(.swiper-pagination-bullets-dynamic)
	.swiper-pagination-bullet-active {
		width: var(--gs-dot-h);
		height: calc(var(--gs-dot-h) * 3);
	}

	// Lines with progress
	&.dot-style-line
	.eedee-gutenslider-pagination:not(.swiper-pagination-bullets-dynamic)
	.swiper-pagination-bullet {
		position: relative;
		vertical-align: middle;
		width: calc(var(--gs-dot-h) * 3);
		height: max(2px, calc(var(--gs-dot-h) / 3));
		border-radius: 999px;
		opacity: 1;
		background: color-mix(in srgb, var(--gutenslider-dot-color) 35%, transparent);

		// The thin line's touch target (see the end of this file).
		&::before {
			inset: -11px -4px;
		}

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: inherit;
			background: var(--gutenslider-dot-color);
			transform: scaleX(0);
			transform-origin: left center;
			transition: transform var(--gs-dot-time) var(--gs-dot-ease);
		}

		&.swiper-pagination-bullet-active::after {
			transform: scaleX(1);
		}
	}

	&.dot-style-line .gs-dot-progress .swiper-pagination-bullet-active::after {
		transform: scaleX(var(--gs-dot-progress, 1));
		transition: none;
	}

	&.dot-style-line:is(.dot-position-left, .dot-position-right)
	.eedee-gutenslider-pagination:not(.swiper-pagination-bullets-dynamic)
	.swiper-pagination-bullet {
		width: max(2px, calc(var(--gs-dot-h) / 3));
		height: calc(var(--gs-dot-h) * 3);

		&::before {
			inset: -4px -11px;
		}

		&::after {
			transform: scaleY(0);
			transform-origin: center top;
		}

		&.swiper-pagination-bullet-active::after {
			transform: scaleY(1);
		}
	}

	&.dot-style-line:is(.dot-position-left, .dot-position-right)
	.gs-dot-progress
	.swiper-pagination-bullet-active::after {
		transform: scaleY(var(--gs-dot-progress, 1));
	}

	@media (prefers-reduced-motion: reduce) {

		&:is(.dot-style-pill, .dot-style-line) .swiper-pagination-bullet,
		&.dot-style-line .swiper-pagination-bullet::after {
			transition: none;
		}
	}
}

// A comfortable touch target around every dot (WCAG 2.2 target size: 24px
// between centers) without spacing the dots out.
.wp-block-eedee-block-gutenslider .swiper-pagination-clickable .swiper-pagination-bullet {
	position: relative;

	&::before {
		content: "";
		position: absolute;
		inset: -7px -4px;
	}
}

// The progress bar sits on the slider's edge, as in 6.x: the dot offset
// moves dots, not the bar.
.wp-block-eedee-block-gutenslider {

	&.dot-position-top .swiper-pagination-progressbar.eedee-gutenslider-pagination {
		top: 0;
	}

	&.dot-position-bottom .swiper-pagination-progressbar.eedee-gutenslider-pagination {
		bottom: 0;
	}

	&.dot-position-left .swiper-pagination-progressbar.eedee-gutenslider-pagination {
		left: 0;
	}

	&.dot-position-right .swiper-pagination-progressbar.eedee-gutenslider-pagination {
		right: 0;
		left: unset;
	}
}

// Dots at a side with the arrows at the sides: both sit in the middle, so
// the dots move in past the arrow. (The arrow variables live on
// .eedee-swiper-outer: set on the pagination, below it.) Arrows next to the
// content are at the sides of the slide, unless the blocks are below or
// above the image.
.wp-block-eedee-block-gutenslider:is(.arrow-position-sides, .arrow-position-content:not(.gs-content-below, .gs-content-above)) {

	.eedee-gutenslider-pagination {
		--gs-dots-clear: calc(var(--gutenslider-arrow-x-offset-sm) + var(--gutenslider-arrow-size-sm) + 6px);

		@media only screen and (min-width: 601px) and (max-width: 960px) {
			--gs-dots-clear: calc(var(--gutenslider-arrow-x-offset-md) + var(--gutenslider-arrow-size-md) + 6px);
		}

		@media only screen and (min-width: 961px) {
			--gs-dots-clear: calc(var(--gutenslider-arrow-x-offset) + var(--gutenslider-arrow-size) + 6px);
		}
	}

	&.dot-position-right .swiper-pagination-bullets.eedee-gutenslider-pagination {
		margin-right: var(--gs-dots-clear);
	}

	&.dot-position-left .swiper-pagination-bullets.eedee-gutenslider-pagination {
		margin-left: var(--gs-dots-clear);
	}
}