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

.wp-block-spectra-pro-form-message {
	margin: 1rem 0;

	&__wrapper {
		width: 100%;
	}

	&__content {
		// Content styling is handled by the main block when using data-message-type
		// This provides fallback for complex nested structures
		font-size: 14px;
		line-height: 1.4;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	&__icon {
		display: inline-flex;
		align-items: center;
		font-weight: bold;
		flex-shrink: 0;
	}

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

	&__text {
		display: inline;
		word-wrap: break-word;

		strong {
			font-weight: 600;
		}

		em {
			font-style: italic;
		}
	}

	&__dismiss {
		flex-shrink: 0;
		background: none;
		border: none;
		padding: 0;
		margin: 0;
		font-size: 1.25rem;
		line-height: 1;
		cursor: pointer;
		color: inherit;
		opacity: 0.7;
		transition: opacity 0.15s ease-in-out;
		margin-top: -0.125rem;

		&:hover {
			opacity: 1;
		}

		&:focus {
			outline-offset: 2px;
			border-radius: 0.125rem;
		}
	}

	.spectra-pro-form-message__content {
		display: flex;
		gap: 10px;
	}

	// Default styles applied directly to the block - matching register block pattern
	&[data-message-type="success"] {
		background: #f0f8f0;
		border-radius: 4px;
		color: #46b450;
		padding: 8px 12px;
		margin-bottom: 10px;
	}

	&[data-message-type="error"] {
		background: #fef7f7;
		border-radius: 4px;
		color: #dc3232;
		padding: 8px 12px;
		margin-bottom: 10px;

		strong {
			font-weight: 600;
		}
	}

	// Message type variations for custom styling (when not using data attributes)
	&--success {

		.spectra-pro-form-message__content {
			display: flex;
			background: #f0f8f0;
			color: #46b450;
		}
	}

	&--error {

		.spectra-pro-form-message__content {
			display: flex;
			background: #fef7f7;
			color: #dc3232;
		}
	}

	// Dynamic styles - specificity (0,2,0) and higher.
	&[class*="wp-block"] {

		// Variable based CSS - Success Message Colors.
		&.spectra-success-message-background &[data-message-type="success"],
		&.spectra-success-message-background.spectra-pro-form-message--success .spectra-pro-form-message__content {
			background-color: var(--spectra-success-message-background);
		}

		&.spectra-success-message-color &[data-message-type="success"],
		&.spectra-success-message-color.spectra-pro-form-message--success .spectra-pro-form-message__content {
			color: var(--spectra-success-message-color);
		}

		&.spectra-success-message-border-color &[data-message-type="success"],
		&.spectra-success-message-border-color.spectra-pro-form-message--success .spectra-pro-form-message__content {
			border-color: var(--spectra-success-message-border-color);
		}

		// Variable based CSS - Error Message Colors.
		&.spectra-error-message-background &[data-message-type="error"],
		&.spectra-error-message-background.spectra-pro-form-message--error .spectra-pro-form-message__content {
			background-color: var(--spectra-error-message-background);
		}

		&.spectra-error-message-color &[data-message-type="error"],
		&.spectra-error-message-color.spectra-pro-form-message--error .spectra-pro-form-message__content {
			color: var(--spectra-error-message-color);
		}

		// Variable based CSS - Generic Text and Background Colors.
		&.spectra-text-color .spectra-pro-form-message__content {
			color: var(--spectra-text-color);
		}

		&.spectra-background-color .spectra-pro-form-message__content {
			background-color: var(--spectra-background-color);
		}

		// Hover states
		&:focus,
		&:hover {

			&.spectra-text-color-hover .spectra-pro-form-message__content {
				color: var(--spectra-text-color-hover) !important;
			}
		}
	}

	&--warning {

		.spectra-pro-form-message__content {
			display: flex;
			background-color: #fefce8;
			border-color: #ca8a04;
			color: #854d0e;
		}

		.spectra-pro-form-message__icon {
			color: #ca8a04;
		}
	}

	&--info {

		.spectra-pro-form-message__content {
			display: flex;
			background-color: #dbeafe;
			border-color: #2563eb;
			color: #1e40af;
		}

		.spectra-pro-form-message__icon {
			color: #2563eb;
		}
	}

	// Visibility states
	&--hidden {
		display: none !important;
	}

	&--visible {
		display: block;
	}

	// Animation states
	&[data-auto-hide] {
		animation: fadeOut 0.3s ease-in-out forwards;
		animation-delay: var(--auto-hide-delay, 5s);
	}

	@keyframes fadeOut {

		from {
			opacity: 1;
			transform: translateY(0);
		}

		to {
			opacity: 0;
			transform: translateY(-0.5rem);
		}
	}

	// Dark mode support
	@media (prefers-color-scheme: dark) {

		&--success {

			.spectra-pro-form-message__content {
				display: flex;
				background-color: #14532d;
				border-color: #22c55e;
				color: #bbf7d0;
			}
		}

		&--error {

			.spectra-pro-form-message__content {
				display: flex;
				background-color: #7f1d1d;
				border-color: #ef4444;
				color: #fecaca;
			}
		}

		&--warning {

			.spectra-pro-form-message__content {
				display: flex;
				background-color: #713f12;
				border-color: #eab308;
				color: #fef3c7;
			}
		}

		&--info {

			.spectra-pro-form-message__content {
				display: flex;
				background-color: #1e3a8a;
				border-color: #3b82f6;
				color: #dbeafe;
			}
		}
	}

	// RTL support
	[dir="rtl"] & {

		&__content {
			direction: rtl;
		}
	}
}

// // Enhanced message styles from parent blocks (moved for proper architecture)
// .wp-block-spectra-pro-form-message {
// 	// Legacy login/register form compatibility (0,1,0 specificity)
// 	&[data-message-type="success"] {
// 		background: #f0f8f0;
// 		border-radius: 4px;
// 		color: #46b450;
// 		padding: 8px 12px;
// 		margin-bottom: 10px;
// 	}

// 	&[data-message-type="error"] {
// 		background: #fef7f7;
// 		border-radius: 4px;
// 		color: #dc3232;
// 		padding: 8px 12px;
// 		margin-bottom: 10px;

// 		strong {
// 			font-weight: 600;
// 		}
// 	}

// 	// Parent context inheritance (moved from parent blocks) - specificity (0,2,0)
// 	&[class*="wp-block"] {
// 		// Inherit parent text color when no specific message color is set
// 		&:not(.spectra-success-message-color):not(.spectra-error-message-color):not(.spectra-text-color) {

// 			.wp-block-spectra-pro-login &[data-message-type="success"],
// 			.wp-block-spectra-pro-register &[data-message-type="success"] {
// 				color: var(--spectra-text-color, #46b450);
// 			}

// 			.wp-block-spectra-pro-login &[data-message-type="error"],
// 			.wp-block-spectra-pro-register &[data-message-type="error"] {
// 				color: var(--spectra-text-color, #dc3232);
// 			}
// 		}
// 	}
// }
