@import "../../../variables";

$items_gap: 8px;

.lzb-block-builder-controls-items {
	display: flex;
	flex-wrap: wrap;
	margin-left: -$items_gap;
}
.lzb-block-builder-controls-item-wrap {
	width: 100%;
	padding-left: $items_gap;
	margin-bottom: -1px;
}

// head
.lzb-block-builder-controls-item {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	z-index: 1;
	padding: 18px 15px;
	padding-left: 50px;
	color: $color_dark_darken;
	cursor: pointer;
	background-color: #fff;
	border: 1px solid #ddd;
	transition: 0.15s border-color ease-in-out, 0.15s box-shadow ease-in-out;

	.lzb-block-builder-controls-item-wrap:first-child & {
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}
	.lzb-block-builder-controls-item-wrap:last-child & {
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	&:hover {
		background-color: #f8f8f8;
	}

	&.lzb-block-builder-controls-item-selected {
		background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
		border-color: rgba(var(--wp-admin-theme-color--rgb), 0.5);
		color: var(--wp-admin-theme-color);
		z-index: 2;
	}

	&.lzb-block-builder-controls-item-dragging {
		z-index: 2;
		box-shadow: 0 5px 15px 0 $color_gray_darken;
	}

	&.lzb-block-builder-controls-item-undefined {
		background-image: linear-gradient(45deg, rgba(0, 0, 0, 15%) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 15%) 50%, rgba(0, 0, 0, 15%) 75%, transparent 75%, transparent);
		filter: opacity(0.4) saturate(0);
		background-size: 6px 6px;
	}

	// icon
	.lzb-block-builder-controls-item-icon {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 50px;
		cursor: grab;

		svg {
			width: 1.5em;
			height: 1.5em;
		}

		> span {
			position: absolute;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;

			+ span {
				opacity: 0;
				transform: scale(0.5);
			}
		}

		.lzb-block-builder-controls-item-dragging > &,
		&:hover {
			> span {
				opacity: 0;
				transform: scale(0.5);

				+ span {
					opacity: 1;
					transform: translateY(0);
				}
			}
		}
	}

	// drag icon
	.lzb-block-builder-controls-item-handler {
		z-index: 1;
	}

	.lzb-block-builder-controls-item-label {
		display: block;
		flex: 1;
		font-weight: 500;

		.lzb-block-builder-controls-item-label-no {
			opacity: 0.3;
		}
		.required {
			margin-left: 5px;
		}
	}

	.lzb-block-builder-controls-item-buttons {
		display: flex;
		flex-wrap: nowrap;
		bottom: 20px;
		gap: 0.3rem;
		opacity: 0;

		button {
			display: inline-flex;
			align-items: center;
			padding: 0;
			margin-right: 5px;
			height: 1rem;
			font-size: 0.8em;
			color: #1e1e1e;
			cursor: pointer;
			background: none;
			border: none;

			&:hover {
				opacity: 1;
			}

			svg {
				width: 1.5em;
				height: 1.5em;
			}
		}
	}

	small {
		font-size: 80%;
		color: $color_dark_lighten;
	}
}

.lzb-block-builder-controls-item:hover,
.lzb-block-builder-controls-item:focus,
.lzb-block-builder-controls-item-selected {
	> .lzb-block-builder-controls-item-buttons {
		opacity: 1;
	}
}

.components-button.lzb-block-builder-controls-item-appender {
	background-color: #1e1e1e;
	color: #fff;
	height: 24px;
	margin-top: 12px;
	min-width: 24px;
	padding: 0;

	&:focus,
	&:hover {
		background: var(--wp-admin-theme-color);
		color: #fff;
	}
}

// repeater child items.
.lzb-block-builder-controls-item-childs {
	padding-left: 20px;
}

// repeater toggle child button.
.lzb-block-builder-controls-item-repeater-toggle {
	position: relative;
	display: block;
	width: 100%;
	padding: 9px;
	padding-left: 20px;
	margin-top: 3px;
	font-size: 80%;
	color: $color_dark_lighten;
	text-align: left;
	cursor: pointer;
	background: none;
	border: none;
	outline: none;

	&:hover {
		color: $color_dark_darken;
	}

	> svg {
		height: 0.7em;
		margin-left: 0.5em;
		vertical-align: -0.05em;
	}

	&.lzb-block-builder-controls-item-repeater-toggle-collapsed > svg {
		transform: rotate(-90deg);
	}
}