/**
 * Shared RSM block editor canvas chrome (preview button, embed pickers).
 */

:root {
	--rsm-block-brand-orange: #ff6b35;
	--rsm-block-brand-orange-hover: #e85a24;
	--rsm-block-brand-cream: #fff6f1;
	--rsm-block-brand-cream-border: #f0d4c4;
}

.rsm-block-preview {
	margin-top: 12px;
	padding: 12px 14px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

.rsm-block-preview__heading {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	color: #1d2327;
}

.rsm-block-preview__hint {
	margin: 10px 0 0;
	font-size: 12px;
	color: #646970;
}

.rsm-block-preview__loading,
.rsm-block-preview__error,
.rsm-block-preview__empty {
	padding: 12px;
	font-size: 13px;
}

.rsm-block-preview__error {
	color: #b32d2e;
}

.rsm-block-editor-wrap {
	position: relative;
}

.rsm-block-editor-wrap--preview-only {
	cursor: pointer;
}

.rsm-block-editor-wrap__preview-only-hint {
	margin: 0 0 8px;
	font-size: 12px;
	color: #646970;
}

.rsm-block-editor-wrap__preview-actions {
	margin-top: 12px;
}

.rsm-block-editor-wrap__preview-disabled {
	margin-top: 12px;
	font-size: 12px;
	color: #646970;
}

.rsm-block-editor-wrap .components-button.rsm-block-editor__button--brand,
.rsm-block-editor-wrap .components-button.rsm-block-editor-wrap__preview-button {
	background: var(--rsm-block-brand-orange) !important;
	border-color: var(--rsm-block-brand-orange) !important;
	color: #fff !important;
}

.rsm-block-editor-wrap .components-button.rsm-block-editor__button--brand:hover:not(:disabled),
.rsm-block-editor-wrap .components-button.rsm-block-editor-wrap__preview-button:hover:not(:disabled) {
	background: var(--rsm-block-brand-orange-hover) !important;
	border-color: var(--rsm-block-brand-orange-hover) !important;
	color: #fff !important;
}

.rsm-block-embed-picker {
	margin-bottom: 12px;
	padding: 12px 14px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

.rsm-block-embed-picker__lead {
	margin: 0 0 8px;
	font-size: 13px;
	color: #1d2327;
}

.rsm-block-embed-editor {
	padding: 12px 14px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}
