/**
 * Slide block editor-only styles.
 */

// Placeholder state - shown when no background is set
.sliderberg-slide-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	// Collapsed state — every empty slide except the active one, so a
	// multi-slide Carousel doesn't show several full placeholders at once.
	&--collapsed {
		background: #f0f0f0;
		border: 1px dashed #ddd;
		cursor: pointer;
		transition: border-color 0.15s ease, background 0.15s ease;

		&:hover {
			border-color: var(--wp-admin-theme-color, #007cba);
			background: #f5f5f5;
		}
	}
}

.sliderberg-slide-placeholder__collapsed-prompt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #757575;
}

.sliderberg-placeholder-colors {
	width: 100%;
}

.sliderberg-slide-editor {
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;

	// Overlay layer
	.sliderberg-slide-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 1;
	}

	// Content layer sits above overlay
	.sliderberg-slide-content {
		position: relative;
		z-index: 2;
		width: 100%;
		box-sizing: border-box;
		padding: 20px;

		// Ensure inner block text is readable over dark backgrounds
		.block-editor-rich-text__editable:empty::before {
			opacity: 0.6;
		}
	}
}