/**
 * Invalid block comparison
 */
.block-editor-block-compare {
	height: auto;
}

.block-editor-block-compare__wrapper {
	display: flex;
	padding-bottom: $grid-unit-20;

	> div {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		width: 50%;
		padding: 0 $grid-unit-20 0 0;
		min-width: 200px;
		max-width: $break-small;

		button {
			float: right;
		}
	}

	.block-editor-block-compare__converted {
		border-left: 1px solid #ddd;
		padding-left: 15px;
		padding-right: 0;
	}

	.block-editor-block-compare__html {
		font-family: $editor-html-font;
		font-size: 12px;
		color: $gray-900;
		border-bottom: 1px solid #ddd;
		padding-bottom: 15px;
		line-height: 1.7;

		span {
			background-color: #e6ffed;
			padding-top: 3px;
			padding-bottom: 3px;
		}

		span.block-editor-block-compare__added {
			background-color: #acf2bd;
		}

		span.block-editor-block-compare__removed {
			background-color: $alert-red;
		}
	}

	.block-editor-block-compare__preview {
		padding: 0;
		padding-top: $grid-unit-20;

		p {
			font-size: 12px;
			margin-top: 0;
		}
	}

	.block-editor-block-compare__action {
		margin-top: $grid-unit-20;
	}

	.block-editor-block-compare__heading {
		font-size: 1em;
		font-weight: 400;
		margin: 0.67em 0;
	}
}