/**
 * Editor styles for ReformBox.
 */

/* Visual indicator for Group/Cover blocks enabled as lightbox containers. */
.is-reformbox-container {
	border: none !important;
	outline: 1px dashed var(--wp-admin-theme-color, #007cba);
	margin-inline: 8px !important;
	position: relative;
	box-shadow: none;
}

.is-reformbox-container::before,
.reformbox-slot-preview::before,
.reformbox-slot-modal::before,
.reformbox-slot-none::before {
	position: absolute !important;
	right: 0;
	top: 0;
	font-size: 10px;
	padding: 0.2em 0.6em;
	z-index: 1000;
	line-height: 1.2;
	letter-spacing: 1px;
	pointer-events: none;
	color: #1e1e1e;
	background: #eee;
	border-bottom-left-radius: 3px;
}

.is-reformbox-container::before {
	content: "ReformBox" !important;
	background: #d9ecff;
	color: #0a4b78;
}

.is-reformbox-container.reformbox-mode-split {
	outline-style: solid;
}

.is-reformbox-container.reformbox-mode-split::before {
	content: "ReformBox Split" !important;
	background: #dbe5f1;
	color: #2f4f74;
	right: -1px;
	top: 0;
	transform: translateY(calc(-100% - 1px));
	border-radius: 3px 3px 0 0;
}

.reformbox-slot-preview {
	border: 1px solid #2b6cb0 !important;
	background: rgba(43, 108, 176, 0.05);
	position: relative;
	box-shadow: none;
}

.reformbox-slot-preview::before {
	content: "Preview" !important;
	background: #d9e8f7;
	color: #1e4e79;
}

.reformbox-slot-modal {
	border: 1px solid #dd6b20 !important;
	background: rgba(221, 107, 32, 0.06);
	position: relative;
	box-shadow: none;
}

.reformbox-slot-modal::before {
	content: "Modal" !important;
	background: #f8e1d2;
	color: #8a4214;
}

.reformbox-slot-none {
	border: 1px solid #5f6b7a !important;
	background: rgba(95, 107, 122, 0.08);
	position: relative;
	box-shadow: none;
}

.reformbox-slot-none::before {
	content: "Both" !important;
	background: #e3e6ea;
	color: #3e4954;
}

.reformbox-editor-warning {
	margin: 10px 0 0;
	padding: 8px 10px;
	border-left: 4px solid #dd6b20;
	background: rgba(221, 107, 32, 0.12);
	font-size: 12px;
}

.reformbox-editor-note {
	margin: 10px 0 0;
	padding: 8px 10px;
	border-left: 4px solid #2b6cb0;
	background: rgba(43, 108, 176, 0.12);
	font-size: 12px;
}