// block card at the top of the Block tab, like the block inspector card.
.lzb-block-builder-block-card {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px;
	border-bottom: 1px solid #e0e0e0;

	// extensions may still return panels here.
	.components-panel__body {
		padding: 0;
		border: 0;
	}

	.lzb-block-builder-block-card-icon-wrap {
		flex-shrink: 0;
	}

	.components-button.lzb-block-builder-block-card-icon {
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		border: 1px solid #e0e0e0;
		border-radius: 2px;

		svg,
		span {
			display: block;
			width: 24px;
			height: 24px;
		}

		.dashicons {
			font-size: 24px;
		}
	}

	.lzb-block-builder-block-card-content {
		flex: 1;
		min-width: 0;
	}

	.lzb-block-builder-block-card-title {
		margin: 0;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.5;
		color: #1e1e1e;
		overflow-wrap: anywhere;
	}

	.lzb-block-builder-block-card-description {
		display: -webkit-box;
		margin: 4px 0 0;
		overflow: hidden;
		font-size: 13px;
		line-height: 1.5;
		color: #757575;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.lzb-block-builder-block-card-slug {
		display: flex;
		gap: 4px;
		align-items: center;
		margin-top: 8px;

		code {
			padding: 2px 6px;
			font-size: 12px;
			overflow-wrap: anywhere;
			background: #f0f0f0;
			border-radius: 2px;
		}
	}

	.lzb-block-builder-block-card-slug-edit {
		display: flex;
		gap: 4px;
		align-items: flex-start;
		margin-top: 8px;

		> :first-child {
			flex: 1;
			min-width: 0;
		}

		.components-notice {
			margin: 8px 0 0;
		}

		// Same font, size and text position as the slug in read mode.
		.lazyblocks-component-block-slug {
			.lazyblocks-component-block-slug-prefix,
			input.components-text-control__input {
				height: 24px;
				min-height: 24px;
				font-family: Consolas, Monaco, monospace;
				font-size: 12px;
				line-height: 20px;
			}

			.lazyblocks-component-block-slug-prefix {
				padding: 2px 14px 2px 6px;
				border-color: #949494;

				> span {
					right: 4px;
				}
			}

			input.components-text-control__input {
				padding: 2px 6px 2px 0;
			}
		}
	}
}

// block icon picker, as wide as the inspector color popovers (260px with the
// 8px padding of the popover).
.lzb-block-builder-block-icon-picker.lazyblocks-component-icon-picker-content > .components-popover__content {
	.lazyblocks-component-icon-picker-sizer {
		width: 244px;
		min-width: 0;
		height: min(100vh, 420px);
	}

	.lazyblocks-component-icon-picker-list-wrap {
		padding: 8px;
	}

	.lazyblocks-component-icon-picker-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;

		.lazyblocks-component-icon-picker-button {
			height: 48px;
		}
	}
}