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


// builder item inside row
.row-inner {
	.ct-builder-item {
		transition: border-color 0.1s ease;

		&:hover {
			border-color: rgba(14, 142, 204, 0.9);
		}

		// custumizing item
		&.ct-customizing:not(.sortable-ghost) {
			border-color: rgba(14, 142, 204, 1);
			animation: border-pulse 3.3s ease-out infinite;
			// animation-play-state: paused;

			@keyframes border-pulse {
				0% {
					box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 
								0px 0px 0px 0px rgba(14, 142, 204, 1);
				}

				15% {
					box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.05), 
								0px 0px 0px 1px rgba(14, 142, 204, 1);
				}

				30% {
					box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 
								0px 0px 0px 0px rgba(14, 142, 204, 1);
				}

				100% {
					box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 
								0px 0px 0px 0px rgba(14, 142, 204, 1);
				}
			}
		}

		// 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;
			}
		}
	}
}

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

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

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