/**
 * Widget: Strzałki karuzeli (kora-carousel-arrows)
 *
 * Wartości domyślne wprost z makiety: kontrolka 43x43, obramowanie 1px
 * #BEC0CB, ikona 14px, odstęp 16px.
 */

.kora-carousel-arrows {
	--kora-arrows-color: #00140C;
	--kora-arrows-border: #BEC0CB;
	--kora-arrows-hover: var(--e-global-color-secondary, #C8F250);
	--kora-arrows-size: 43px;
	--kora-arrows-icon: 14px;
	--kora-arrows-gap: 16px;

	display: flex;
	gap: var(--kora-arrows-gap);
}

/* Hello Elementor stylizuje każdy button, więc reset obejmuje też :hover
   i :focus - inaczej motyw dokładałby własne tło i obramowanie. */
.kora-carousel-arrows .kora-carousel-arrows__button,
.kora-carousel-arrows .kora-carousel-arrows__button:hover,
.kora-carousel-arrows .kora-carousel-arrows__button:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--kora-arrows-size);
	block-size: var(--kora-arrows-size);
	padding: 0;
	border: 1px solid var(--kora-arrows-border);
	border-radius: 50%;
	background: transparent;
	color: var(--kora-arrows-color);
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}

.kora-carousel-arrows .kora-carousel-arrows__button:hover:not(:disabled) {
	border-color: var(--kora-arrows-hover);
	background-color: var(--kora-arrows-hover);
}

.kora-carousel-arrows .kora-carousel-arrows__button:disabled {
	opacity: .35;
	cursor: default;
}

.kora-carousel-arrows svg {
	inline-size: var(--kora-arrows-icon);
	block-size: var(--kora-arrows-icon);
}