/**
 * Form Message Block Editor Styles
 *
 * @since 2.0.0
 * @package Spectra Pro
 */

// Editor-specific overrides and additions
.block-editor-block-list__layout {

	// Visibility states - hidden by default, shown only when demo toggles are ON
	// Note: These classes are added without the wp-block- prefix
	.spectra-pro-form-message--hidden {
		display: none !important;
	}

	.spectra-pro-form-message--visible {
		display: block !important;
	}

	.wp-block-spectra-pro-form-message {

		// RichText specific styling - inherit all parent styles
		.rich-text {
			border: none !important;
			background: transparent !important;
			color: inherit !important;
			font: inherit !important;
			padding: 0 !important;
			margin: 0 !important;
			outline: none !important;
			box-shadow: none !important;
			display: inline !important;
			width: auto !important;

			&:focus {
				box-shadow: none !important;
				outline: none !important;
			}

			// Remove any default RichText padding/margin
			p {
				margin: 0 !important;
				padding: 0 !important;
				display: inline;
			}
		}

		// Disable dismiss functionality in editor
		&__dismiss {
			cursor: default;
			pointer-events: none;
			opacity: 0.5;
		}

		// Ensure icon and text are aligned properly
		&__content {
			display: flex !important;
			align-items: center !important;
			gap: 10px !important;
		}

		&__icon {
			display: inline-flex !important;
			align-items: center !important;
			flex-shrink: 0 !important;
		}

		&__text-wrapper {
			display: inline-flex !important;
			align-items: center !important;
			flex: 1 !important;
		}

		&__text {
			display: inline !important;
		}
	}

	// Remove all selection borders and outlines that interfere with message styling
	.is-selected .wp-block-spectra-pro-form-message {
		// Remove editor selection styling that conflicts with message styles
		&[data-message-type="success"],
		&[data-message-type="error"] {
			box-shadow: none !important;
			outline: none !important;
			border: inherit !important; // Keep the message's own border styling
		}
	}
}
