/**
 * Moduł: sterowanie karuzeli.
 * Figma: dwa okręgi 47×47, odstęp 8, ikona 16×16. „Wstecz" bez tła, „dalej" na czerni.
 */

.carousel-nav {
	display: flex;
	gap: var(--space-xs);
	flex: 0 0 auto;
}

.carousel-nav__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 47px;
	height: 47px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--color-ink);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.carousel-nav__btn--solid {
	background-color: var(--color-black);
	color: var(--color-white);
}

.carousel-nav__icon {
	width: 16px;
	height: 16px;
}

.carousel-nav__btn:hover {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.carousel-nav__btn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Makieta nie zawiera stanu „nie ma czego przewinąć", a strzałki są w niej pełnokolorowe,
   więc disabled nie przygasza — informację niosą atrybut i kursor. */
.carousel-nav__btn:disabled {
	cursor: default;
}

.carousel-nav__btn:disabled:hover {
	background-color: transparent;
	color: var(--color-ink);
}

.carousel-nav__btn--solid:disabled:hover {
	background-color: var(--color-black);
	color: var(--color-white);
}