@use "variables";

.ct-builder-items {
	display: flex;
	align-items: center;
	position: relative;
	height: #{variables.$builder-items-spacing * 2 + variables.$builder-item-height};
	padding: variables.$builder-items-spacing #{calc(variables.$builder-items-spacing / 2)};
	box-sizing: border-box;
}

.ct-builder-item {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	width: variables.$builder-item-width;
	height: variables.$builder-item-height;
	padding: 0 12px;
	font-size: 12px;
	line-height: 12px;
	font-weight: 500;
	background: #fff;
	cursor: grab;
	user-select: none;
	border: 1px solid #e0e0e8;
	border-radius: 3px;
	box-sizing: border-box;
	margin: 0 #{calc(variables.$builder-items-spacing / 2)};
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;


	// draggable item
	&.sortable-drag {
		padding-right: 0;
		opacity: 1 !important;
		width: variables.$builder-item-width !important;
		border-color: rgba(156, 156, 156, 0.5);
		// box-shadow: 0px 2px 15px 0px rgba(101, 106, 111, 0.4);
		box-shadow: 0 5px 20px -5px rgba(101, 106, 111, 0.4);
		z-index: 99999999999 !important;

		.ct-builder-item-label {
			width: calc(100% - 10px);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		button,
		.ct-clone-item,
		.ct-remove-item {
			display: none;
		}
	}

	&[data-id*="mobile-menu"] {
		width: #{variables.$builder-item-width + 15px};
	}

	// not registered items
	&.ct-builder-item-not-registered {
		// display: none;
		color: rgba(75, 16, 9, 0.8);
		background: rgba(221, 75, 57, 0.1);
		border-color: rgba(221, 75, 57, 0.2);

		--ui-accent-color: rgba(221, 75, 57, 0.5);
	}
}

body:has(.ct-builder-item.sortable-drag) {
	user-select: none;
}


// builder item inside row
.row-inner {
	.ct-builder-item {
		transition: border-color 0.2s ease,
					box-shadow 0.2s ease;

		&:hover {
			border-color: var(--ui-accent-color);
		}

		// custumizing item
		&.ct-customizing:not(.sortable-ghost) {
			border-color: var(--ui-accent-color);
			box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.05),
						0px 0px 0px 1px var(--ui-accent-color);
		}

		// ghost item
		&.sortable-ghost {
			height: variables.$builder-item-height;
			border-radius: 3px;
			box-shadow: none;
			opacity: 0.6;
			font-size: 0;
			box-sizing: border-box;
			border: 1px dashed #9c9c9c;
			background: rgba(0, 0, 0, 0.015);

			button,
			.ct-clone-item,
			.ct-remove-item {
				display: none;
			}
		}
	}
}

.ct-filler {
	flex: 1;
	order: -1;
	height: 100%;
}

// dragging item
.ct-builder-dragging {
	cursor: grabbing;
	user-select: none;

	.ct-builder-item {
		cursor: grabbing;
	}
}