@import '../../shared/styles/gutenberg-colors.scss';

.wp-block-jetpack-mailchimp {

	&.is-processing {
		form {
			display: none;
		}
	}

	.wp-block-jetpack-mailchimp_notification {
		display: none;
		margin-bottom: 1.5em;
		padding: 0.75em;
		&.is-visible {
			display: block;
		}

		&.wp-block-jetpack-mailchimp_error {
			background-color: var( --muriel-hot-red-500 );
			color: var( --muriel-white );
		}

		&.wp-block-jetpack-mailchimp_processing {
			background-color: rgba( 0, 0, 0, 0.025 ); // This would be "dark-opacity-light-50" which doesn't exist in Gutenberg
		}

		&.wp-block-jetpack-mailchimp_success {
			background-color: var( --muriel-hot-green-500 );
			color: var( --muriel-white );
		}
	}

}
