@use "variables";

// available items
.ct-available-items {
	
	.ct-builder-items {
		flex-direction: column;
		width: 100%;
		height: 100%;
		padding: 0;

		> * {
			width: 100%;
			height: #{variables.$builder-item-height + 4px};
			flex: 0 0 #{variables.$builder-item-height + 4px};

			&:not(:last-child) {
				margin-bottom: 13px;
			}

			&:after {
				font-family: dashicons;
				content: "\f545";
				width: 12px;
				height: 12px;
				font-size: 12px;
				line-height: 13px;
				color: inherit;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				transition: opacity 0.1s ease;
			}
		}

		.ct-builder-item {
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);

			button {
				display: none;
			}

			&.sortable-ghost {
				box-shadow: none;

				&:after {
					content: '\f345';
				}
			}
		}
	}
}


// item added in builder
.ct-available-items {
	.sortable-ghost,
	.ct-item-in-builder {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 12px;
		font-size: 12px;
		cursor: pointer;
		border-radius: 3px;
		box-sizing: border-box;
		border: 1px dashed rgba(156, 156, 156, 0.6);
		background: rgba(255, 255, 255, 0.4);
	}

	.ct-item-in-builder {
		&:after {
			content: '\f345';
		}

		&:hover {
			background: rgba(255, 255, 255, 0.7);
			border-color: rgba(156, 156, 156, 0.7);
		}
	}
}