:root {
	--currentItem: 0;
	--currentItemWidth: 100px;
}

.clonerContainer {
	width: max-content !important;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: var(--primary-blur);
	left: 50% !important;
	transform: translateX(-50%);
	border-radius: var(--primary-radius);
	z-index: auto;
}

.clonerContainer > .ggskin_cloner {
	width: max-content !important;
	position: relative !important;
	display: flex;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%);
	border-radius: var(--primary-radius);
	/* z-index: 2; */
}

div:has(> .clonerItem) {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.clonerContainer .clonerItem {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.clonerContainer div:has(> .clonerItem):not(:last-child)::after {
	content: "";
	width: 2px;
	height: 90%;
	background-color: #fff;
	position: absolute;
	top: 50%;
	right: 0px;
	transform: translate(0px, -50%);
}

.clonerContainer .clonerItem > div {
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: break-spaces !important;
	border-radius: var(--primary-radius);
}

.clonerContainer .activeBackground {
	border-radius: var(--primary-radius);
	transition: left 200ms linear;
	position: absolute;
	top: 50% !important;
	transform: translateY(-50%);
	left: calc((var(--currentItemWidth) * var(--currentItem)) + 4px) !important;
}

.clonerContainer:has(div:has(> .activeTransition):last-child)
	.activeBackground {
	left: calc((var(--currentItemWidth) * var(--currentItem)) + 5px) !important;
}

.clonerContainer:has(
		.ggskin_cloner > div:last-child > .clonerItem.activeTransition
	)
	.activeBackground {
	left: calc((var(--currentItemWidth) * var(--currentItem)) + 5px) !important;
}


/* custom icon for category title */
.categoryCloner .categoryTitle:hover,
.categoryCloner.active .categoryTitle,
.subCategoryCloner .subCategoryTitle:hover,
.subCategoryCloner.active .subCategoryTitle {
	fill: #ffffff;
}
