.gd-bas {
	--gd-bas-position: 50%;
	--gd-bas-height: auto;
	--gd-bas-radius: 0%;
	--gd-bas-aspect-ratio: 16 / 9;
	position: relative;
	width: 100%;
	margin: 1rem 0;
	border-radius: var(--gd-bas-radius);
}

.gd-bas__stage {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: var(--gd-bas-height);
	aspect-ratio: var(--gd-bas-aspect-ratio);
	background: #f3f4f6;
	border-radius: inherit;
	isolation: isolate;
}

.gd-bas__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
	pointer-events: none;
}

.gd-bas__before {
	position: absolute;
	inset: 0;
	z-index: 2;
	clip-path: inset(0 calc(100% - var(--gd-bas-position)) 0 0);
	overflow: hidden;
}

.gd-bas__image--before {
	width: 100%;
}

.gd-bas__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--gd-bas-position);
	z-index: 4;
	width: 3px;
	background: #ffffff;
	box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.25), 0 0 18px rgba(17, 24, 39, 0.3);
	transform: translateX(-50%);
}

.gd-bas__handle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	border: 3px solid #ffffff;
	border-radius: 999px;
	background: rgba(17, 24, 39, 0.68);
	box-shadow: 0 8px 24px rgba(17, 24, 39, 0.35);
	transform: translate(-50%, -50%);
}

.gd-bas__handle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 28px;
	height: 18px;
	background-color: #ffffff;
	clip-path: polygon(
		0 50%,
		28% 0,
		28% 34%,
		72% 34%,
		72% 0,
		100% 50%,
		72% 100%,
		72% 66%,
		28% 66%,
		28% 100%
	);
	transform: translate(-50%, -50%);
}

.gd-bas__range {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: ew-resize;
	opacity: 0;
}

.gd-bas-placeholder {
	padding: 0.9rem 1rem;
	border: 1px dashed #9ca3af;
	background: #f9fafb;
	color: #374151;
}

@media (max-width: 600px) {
	.gd-bas__handle::before {
		width: 38px;
		height: 38px;
	}

	.gd-bas__handle::after {
		width: 24px;
		height: 16px;
	}
}