/**
 * Shared carousel prev/next controls.
 *
 * Used by Speakers, Testimonials, and other Swiper carousels.
 */

.techbbq-carousel-nav {
	display: flex;
	flex-shrink: 0;
	gap: var(--techbbq-space-1);
	align-items: center;
}

.techbbq-carousel-nav__btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: var(--techbbq-radius-pill);
	background: var(--techbbq-bg-surface);
	color: var(--techbbq-content-secondary);
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.techbbq-carousel-nav__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.techbbq-carousel-nav__btn:not(:disabled):hover,
[type="button"].techbbq-carousel-nav__btn:not(:disabled):hover {
	outline: none;
	color: var(--techbbq-btn-primary-content-hover);
	background-color: var(--techbbq-btn-primary-fill-hover);
	border-color: transparent;
}

.techbbq-carousel-nav__btn:not(:disabled):focus:not(:hover),
.techbbq-carousel-nav__btn:not(:disabled):focus-visible:not(:hover),
[type="button"].techbbq-carousel-nav__btn:not(:disabled):focus:not(:hover),
[type="button"].techbbq-carousel-nav__btn:not(:disabled):focus-visible:not(:hover) {
	outline: none;
	color: var(--techbbq-content-secondary);
	background-color: var(--techbbq-bg-surface);
	border-color: transparent;
}

.techbbq-carousel-nav__icon {
	display: block;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

/* Header controls: desktop/tablet only. */
.techbbq-carousel-nav--header {
	display: none;
}

/* Footer controls: mobile only. */
.techbbq-carousel-nav--footer {
	display: flex;
}

@media (min-width: 768px) {
	.techbbq-carousel-nav--header {
		display: flex;
	}

	.techbbq-carousel-nav--footer {
		display: none;
	}
}