/**
 * RSF block editor — canvas + inspector helpers.
 */

.block-editor-block-list__block .rsm-rsf-animate:not(.is-rsm-rsf-editor-preview) {
	opacity: 1;
	transform: none;
}

.block-editor-block-list__block .rsm-rsf-animate.is-rsm-rsf-editor-preview {
	opacity: 0;
}

.block-editor-block-list__block .rsm-rsf-animate.is-rsm-rsf-editor-preview.is-rsm-rsf-visible {
	opacity: 1;
	transform: none;
}

.block-editor-block-list__block .rsm-rsf-animate:not(.is-rsm-rsf-visible):not(.is-rsm-rsf-editor-preview) {
	outline: 1px dashed rgba(0, 124, 186, 0.35);
	outline-offset: 2px;
}

.block-editor-block-list__block.is-selected .rsm-rsf-animate {
	outline-color: rgba(0, 124, 186, 0.65);
}

.block-editor-block-list__block .rsm-rsf-stagger-host.is-selected,
.block-editor-block-list__block.is-selected .rsm-rsf-stagger-host {
	outline: 1px dashed rgba(0, 124, 186, 0.35);
	outline-offset: 2px;
}

.block-editor-block-list__block .rsm-rsf-hide-mobile,
.block-editor-block-list__block .rsm-rsf-hide-tablet,
.block-editor-block-list__block .rsm-rsf-hide-desktop {
	position: relative;
}

.block-editor-block-list__block .rsm-rsf-hide-mobile::after,
.block-editor-block-list__block .rsm-rsf-hide-tablet::after,
.block-editor-block-list__block .rsm-rsf-hide-desktop::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px dashed rgba(180, 80, 0, 0.45);
	background: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 6px,
		rgba(180, 80, 0, 0.06) 6px,
		rgba(180, 80, 0, 0.06) 12px
	);
}

.block-editor-block-list__layout .block-editor-block-list__block[data-rsm-rsf-visibility-hint]::before {
	content: attr(data-rsm-rsf-visibility-hint);
	position: absolute;
	top: 2px;
	right: 4px;
	z-index: 2;
	font-size: 10px;
	line-height: 1.2;
	padding: 1px 5px;
	border-radius: 3px;
	background: rgba(180, 80, 0, 0.12);
	color: #9a3412;
	pointer-events: none;
}

.block-editor-block-list__block .rsm-rsf-hover .wp-block-button__link:hover,
.block-editor-block-list__block .rsm-rsf-hover .wp-block-navigation-item__content:hover {
	color: var(--rsm-hover-text) !important;
	background-color: var(--rsm-hover-bg) !important;
	border-color: var(--rsm-hover-border) !important;
}
