/**
 * The following styles get applied inside the editor only.
 */

.wp-block-carhop-blocks-image-stack {
	overflow: visible;
	.image-stack-placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background-color: rgba(240, 240, 240, 0.5);
		background-color: red;
		border: 2px dashed #ccc;
	}

	.image-stack-item {
		cursor: pointer;
		transition: opacity 0.2s ease;

		&:hover {
			opacity: 0.9;
		}

		&.is-selected {
			outline: 3px solid #007cba;
			outline-offset: -3px;
			z-index: 10;
		}
	}
}

.image-stack-image-preview {
	margin-bottom: 16px;

	img {
		width: 100%;
		height: auto;
		display: block;
		border-radius: 4px;
	}
}

.image-stack-image-controls {
	display: flex;
	gap: 8px;
	margin-top: 16px;
	flex-wrap: wrap;

	.components-button {
		flex: 1;
		min-width: 80px;
		justify-content: center;
	}
}