@import "vars";

.builder-item {
	display: flex;
	align-items: center;
	background-color: #fff;
	border: $wp-grey-border;
	min-width: 90px;
	white-space: nowrap;
	cursor: grab;
	margin: 0 2px;
	border-radius: 3px;
	box-sizing: border-box;
	height: $rows-height - 7;
	color: $item-text-color;
	z-index: 1;

	button {
		padding: 0;
		min-width: 30px;

		.settings {
			padding: 5px;
		}

		.remove {
			padding: 5px;
		}
	}

	&.active {
		background-color: $wp-blue;
		color: #fff;

		svg {
			fill: #fff;
		}
	}

	.handle {
		width: 15px;
		padding: 0 2px 0 5px;
	}

	svg {
		fill: $item-icons-color;
	}

	.actions {
		margin-left: auto;
	}

	&.sortable-ghost {
		border: $droppable-border;
		padding-right: 10px;
	}
}

.droppable-wrap {
	&.sidebar {
		padding: 4px;
		width: 100%;
		box-sizing: border-box;

		.builder-item {
			min-width: unset;
			max-width: 100%;
			width: 100%;
			margin: 0 0 4px;

			.name {
				max-width: 90%;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	&.overflowed {
		.builder-item {
			.name {
				max-width: 35px;
				text-overflow: ellipsis;
				overflow: hidden;
				transition: max-width 0.2s ease;
			}
			&:hover {
				.name {
					max-width: 250px;
				}
			}
		}
	}
}
