/*
 * Round hand-drawn navigation control, shared by the carousels and the fade
 * slider. The ring and the chevron are two separate assets: only the chevron
 * flips for the "next" direction, so the ring keeps its irregular outline
 * instead of appearing mirrored.
 */
.tdev-arrow {
	--arrow-size: 69px;

	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--arrow-size);
	height: var(--arrow-size);
	padding: 0;
	border: none;
	background: url('../images/carousel-circle.svg') no-repeat center / contain;
	cursor: pointer;
}

.tdev-arrow::before {
	content: "";
	width: 16px;
	height: 26px;
	background: url('../images/carousel-arrow.svg') no-repeat center / contain;
}

.tdev-arrow--next::before {
	transform: scaleX(-1);
}