/* Shared carousel controls: arrows either side, and a dash per slide underneath */

.olligents-carousel {
	--carousel-accent: var(--wp--preset--color--contact, #007aff);
	--carousel-interval: 7s;
	position: relative;
}

.olligents-carousel *,
.olligents-carousel *::before,
.olligents-carousel *::after { box-sizing: border-box; }

.carousel-arrow {
	position: absolute;
	top: var(--carousel-arrow-top, 50%);
	z-index: 5;
	display: grid;
	place-items: center;
	width: 90px;
	height: 90px;
	padding: 0;
	border: 1px solid var(--carousel-accent);
	border-radius: 50%;
	/* Outlined, letting the cards behind show through a little */
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--carousel-accent);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.carousel-arrow svg {
	width: 34px;
	height: 34px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.carousel-arrow--prev { left: clamp(16px, 6vw, 104px); }
.carousel-arrow--next { right: clamp(16px, 6vw, 104px); }

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
	background: var(--carousel-accent);
	color: #fff;
}

.carousel-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	margin-top: 64px;
	color: var(--carousel-accent);
}

.carousel-controls__dashes {
	display: flex;
	gap: 10px;
}

/* A wide hit area around a thin line */
.carousel-controls__dash {
	position: relative;
	width: 40px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.carousel-controls__dash::before,
.carousel-controls__dash::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: #d9dee5;
}

.carousel-controls__dash::after {
	background: var(--carousel-accent);
	transform: scaleX(0);
	transform-origin: left;
}

.carousel-controls__dash.is-current::after { transform: none; }

/* Pause / play: shows pause while playing, play once stopped */
.carousel-controls__toggle {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--carousel-accent);
	border-radius: 50%;
	background: none;
	color: var(--carousel-accent);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.carousel-controls__toggle:hover,
.carousel-controls__toggle:focus-visible { background: var(--carousel-accent); color: #fff; }

.carousel-controls__toggle svg { width: 14px; height: 14px; }
.carousel-controls__pause { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.carousel-controls__play { fill: currentColor; }
.carousel-controls__play,
.is-playing .carousel-controls__pause { display: block; }
.carousel-controls__pause,
.is-playing .carousel-controls__play { display: none; }

/* While auto-playing, the current dash fills up; when it's full the carousel
   moves on (carousel.js listens for animationend) */
.is-playing .carousel-controls__dash.is-current::after {
	animation: carousel-fill var(--carousel-interval) linear;
}

.is-playing.is-paused .carousel-controls__dash.is-current::after { animation-play-state: paused; }

@keyframes carousel-fill {
	from { transform: scaleX(0); }
	to { transform: none; }
}

/* Arrows move under the slides, either side of the controls, once there's no
   room beside them */
@media (max-width: 1200px) {
	.carousel-arrow { top: auto; bottom: 0; width: 56px; height: 56px; transform: none; }
	.carousel-arrow svg { width: 24px; height: 24px; }
	.carousel-arrow--prev { left: 16px; }
	.carousel-arrow--next { right: 16px; }
	.carousel-controls { min-height: 56px; gap: 12px; margin-top: 40px; }
}

@media (max-width: 600px) {
	.carousel-controls__dashes { gap: 6px; }
	.carousel-controls__dash { width: 22px; }
}