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

.ct-builder-item {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	width: $builder-item-width;
	height: $builder-item-height;
	padding: 0 12px;
	font-size: 12px;
	line-height: 12px;
	font-weight: 500;
	background: #fff;
	cursor: grab;
	border: 1px solid #e0e0e8;
	border-radius: 3px;
	box-sizing: border-box;
	margin: 0 #{calc($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: $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;

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

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

	// not registered items
	&.ct-builder-item-not-registered {
		display: 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: $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;
	}
}
