/**
 * Editor styles for the Shopify Products block
 */

.prodshow-block-editor {
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;

	.prodshow-loading {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		padding: 40px;
		color: #757575;
	}
}

// Product Search Component
.prodshow-product-search,
.prodshow-collection-search {
	margin-bottom: 16px;

	.prodshow-search-loading {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 12px;
		color: #757575;
	}

	.prodshow-no-results {
		padding: 12px;
		color: #757575;
		font-style: italic;
		margin: 0;
	}

	.prodshow-search-results {
		max-height: 400px;
		overflow-y: auto;
		border: 1px solid #ddd;
		border-radius: 4px;
		margin-top: 8px;
	}

	.prodshow-search-result-item {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px;
		border-bottom: 1px solid #f0f0f0;
		transition: background-color 0.2s;

		&:last-child {
			border-bottom: none;
		}

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

		.prodshow-result-image {
			width: 50px;
			height: 50px;
			object-fit: cover;
			border-radius: 4px;
			flex-shrink: 0;
		}

		.prodshow-result-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 4px;

			strong {
				font-weight: 600;
			}

			.prodshow-result-handle,
			.prodshow-result-count {
				font-size: 12px;
				color: #757575;
			}
		}
	}
}

// Selected Collection
.prodshow-selected-collection {
	padding: 12px;
	background: #f0f0f0;
	border-radius: 4px;
	margin-bottom: 16px;

	p {
		margin: 0 0 8px;

		&:last-of-type {
			margin-bottom: 12px;
		}
	}
}

// Product List Component
.prodshow-product-list {
	margin-top: 16px;

	.prodshow-list-label {
		margin: 0 0 12px;
	}

	.prodshow-empty-list {
		padding: 12px;
		color: #757575;
		font-style: italic;
		margin: 0;
	}

	.prodshow-product-items {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.prodshow-product-item {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px;
		background: #f9f9f9;
		border: 1px solid #ddd;
		border-radius: 4px;

		.prodshow-item-image {
			width: 50px;
			height: 50px;
			object-fit: cover;
			border-radius: 4px;
			flex-shrink: 0;
		}

		.prodshow-item-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 4px;

			strong {
				font-weight: 600;
			}

			.prodshow-item-handle {
				font-size: 12px;
				color: #757575;
			}
		}

		.prodshow-item-actions {
			display: flex;
			gap: 4px;
		}
	}
}

// Inspector Controls overrides
.components-panel__body {
	.components-base-control__help {
		margin-top: 8px;
		font-size: 12px;
	}
}