.ccba {
	--ccba-position: 50%;
	--ccba-divider-color: #fff;
	--ccba-divider-size: 3px;
	--ccba-handle-size: 54px;
	--ccba-symbol-color: #111827;
	--ccba-symbol-size: 10px;
	--ccba-label-offset: 18px;
	--ccba-focus-color: #2563eb;
	--ccba-focus-width: 3px;
	position: relative;
	width: 100%;
	max-width: 100%;
	-webkit-tap-highlight-color: transparent;
}

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

.ccba__viewport {
	position: relative;
	width: 100%;
	height: 520px;
	overflow: hidden;
	isolation: isolate;
	background: #e5e7eb;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}

.ccba__media {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

.ccba__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.ccba__media--before {
	z-index: 2;
}

.ccba--horizontal .ccba__media--before {
	-webkit-clip-path: inset(0 calc(100% - var(--ccba-position)) 0 0);
	clip-path: inset(0 calc(100% - var(--ccba-position)) 0 0);
}

.ccba--vertical .ccba__media--before {
	-webkit-clip-path: inset(0 0 calc(100% - var(--ccba-position)) 0);
	clip-path: inset(0 0 calc(100% - var(--ccba-position)) 0);
}

.ccba__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	object-fit: cover;
	object-position: center center;
	pointer-events: none;
}

.ccba__divider {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	background: var(--ccba-divider-color);
}

.ccba--horizontal .ccba__divider {
	top: 0;
	bottom: 0;
	left: var(--ccba-position);
	width: var(--ccba-divider-size);
	transform: translateX(-50%);
}

.ccba--vertical .ccba__divider {
	left: 0;
	right: 0;
	top: var(--ccba-position);
	height: var(--ccba-divider-size);
	transform: translateY(-50%);
}

.ccba__handle-hit {
	position: absolute;
	z-index: 7;
	display: grid;
	place-items: center;
	width: max(44px, calc(var(--ccba-handle-size) + 20px));
	height: max(44px, calc(var(--ccba-handle-size) + 20px));
	cursor: grab;
	touch-action: none;
}

.ccba--horizontal .ccba__handle-hit {
	left: var(--ccba-position);
	top: 50%;
	transform: translate(-50%, -50%);
}

.ccba--vertical .ccba__handle-hit {
	left: 50%;
	top: var(--ccba-position);
	transform: translate(-50%, -50%);
}

.ccba.is-dragging .ccba__handle-hit {
	cursor: grabbing;
}

.ccba--interaction-hover .ccba__viewport {
	cursor: crosshair;
}

.ccba__handle {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--ccba-handle-size);
	height: var(--ccba-handle-size);
	min-width: 1px;
	min-height: 1px;
	background: #fff;
	border-radius: 50%;
	pointer-events: none;
}

.ccba__symbol,
.ccba__symbol::before,
.ccba__symbol::after {
	display: block;
}

.ccba--symbol-arrows .ccba__symbol {
	position: relative;
	width: calc((var(--ccba-symbol-size) * 2) + 8px);
	height: calc(var(--ccba-symbol-size) * 2);
}

.ccba--symbol-arrows .ccba__symbol::before,
.ccba--symbol-arrows .ccba__symbol::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	transform: translateY(-50%);
}

.ccba--horizontal.ccba--symbol-arrows .ccba__symbol::before {
	left: 0;
	border-top: var(--ccba-symbol-size) solid transparent;
	border-bottom: var(--ccba-symbol-size) solid transparent;
	border-right: var(--ccba-symbol-size) solid var(--ccba-symbol-color);
}

.ccba--horizontal.ccba--symbol-arrows .ccba__symbol::after {
	right: 0;
	border-top: var(--ccba-symbol-size) solid transparent;
	border-bottom: var(--ccba-symbol-size) solid transparent;
	border-left: var(--ccba-symbol-size) solid var(--ccba-symbol-color);
}

.ccba--vertical.ccba--symbol-arrows .ccba__symbol {
	width: calc(var(--ccba-symbol-size) * 2);
	height: calc((var(--ccba-symbol-size) * 2) + 8px);
}

.ccba--vertical.ccba--symbol-arrows .ccba__symbol::before,
.ccba--vertical.ccba--symbol-arrows .ccba__symbol::after {
	left: 50%;
	top: auto;
	transform: translateX(-50%);
}

.ccba--vertical.ccba--symbol-arrows .ccba__symbol::before {
	top: 0;
	border-left: var(--ccba-symbol-size) solid transparent;
	border-right: var(--ccba-symbol-size) solid transparent;
	border-bottom: var(--ccba-symbol-size) solid var(--ccba-symbol-color);
}

.ccba--vertical.ccba--symbol-arrows .ccba__symbol::after {
	bottom: 0;
	border-left: var(--ccba-symbol-size) solid transparent;
	border-right: var(--ccba-symbol-size) solid transparent;
	border-top: var(--ccba-symbol-size) solid var(--ccba-symbol-color);
}

.ccba--symbol-grip .ccba__symbol {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ccba-symbol-color);
}

.ccba--horizontal.ccba--symbol-grip .ccba__symbol {
	box-shadow: -8px 0 0 var(--ccba-symbol-color), 8px 0 0 var(--ccba-symbol-color);
}

.ccba--vertical.ccba--symbol-grip .ccba__symbol {
	box-shadow: 0 -8px 0 var(--ccba-symbol-color), 0 8px 0 var(--ccba-symbol-color);
}

.ccba--symbol-none .ccba__symbol {
	display: none;
}

.ccba__label {
	position: absolute;
	z-index: 6;
	max-width: calc(100% - (var(--ccba-label-offset) * 2));
	margin: 0;
	line-height: 1.2;
	pointer-events: none;
}

.ccba__label--top-left {
	top: var(--ccba-label-offset);
	left: var(--ccba-label-offset);
}

.ccba__label--top-center {
	top: var(--ccba-label-offset);
	left: 50%;
	transform: translateX(-50%);
}

.ccba__label--top-right {
	top: var(--ccba-label-offset);
	right: var(--ccba-label-offset);
}

.ccba__label--bottom-left {
	bottom: var(--ccba-label-offset);
	left: var(--ccba-label-offset);
}

.ccba__label--bottom-center {
	bottom: var(--ccba-label-offset);
	left: 50%;
	transform: translateX(-50%);
}

.ccba__label--bottom-right {
	right: var(--ccba-label-offset);
	bottom: var(--ccba-label-offset);
}

.ccba__range {
	position: absolute;
	z-index: 8;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.ccba.is-keyboard-focus .ccba__handle {
	outline: var(--ccba-focus-width) solid var(--ccba-focus-color);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.ccba *,
	.ccba *::before,
	.ccba *::after {
		scroll-behavior: auto !important;
	}
}