.ct-builder-items {
	display: flex;
	align-items: center;
	position: relative;
	height: #{$builder-items-spacing * 2 + $builder-item-height};
	padding: $builder-items-spacing #{$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;
	font-weight: 500;
	background: #fff;
	cursor: grab;
	border: 1px solid #e0e0e8;
	border-radius: 3px;
	box-sizing: border-box;
	margin: 0 #{$builder-items-spacing / 2};
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;


	// draggable item
	&.sortable-drag {
		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;
	}
}


// builder item inside row
.row-inner {
	.ct-builder-item {

		// 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 {
				display: none;
			}
		}
	}
}



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

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