@import "../helpers/boxed";

// Text sizes are in em of the wrapper (1rem by default, same as before) so the
// block's font size setting scales them together.
.wp-block-affreviews-pros-cons-list {
	@include affr-boxed-style;
	font-size: 1rem;

	// Two equal columns that stack below 500px, like the legacy block.
	.affr-pros-cons-wrapper {
		display: flex;
		flex-wrap: wrap;
		gap: 25px 0;

		.affr-pros-cons-col {
			flex: 1 1 250px;

			.affr-title-sm {
				display: block;
				font-size: 0.8em;
				font-weight: 700;
				text-transform: uppercase;
				margin-bottom: 0.8rem;
			}
		}
	}

	// Negatives below positives, 20px apart, like the legacy single large block.
	// Plain block flow: a wrapping column flexbox adds stray height in Chrome.
	&.is-stacked .affr-pros-cons-wrapper {
		display: block;

		.affr-pros-cons-col + .affr-pros-cons-col {
			margin-top: 20px;
		}
	}

	.affr-pros,
	.affr-cons {
		ul {
			list-style: none;
			margin: 0 auto;
			padding: 0;
			max-width: 400px;
		}

		li {
			display: flex;
			align-items: flex-start;
			text-align: left;
			margin: 2px 0;
			font-size: 1em;

			svg {
				width: 32px;
				height: 32px;
				margin-right: 3px;
				margin-top: -3px;
				flex-shrink: 0;
				display: block;
			}

			span {
				width: calc(100% - 40px);
				line-height: 1.65;
			}
		}
	}

	.affr-pros {
		svg {
			fill: var(--affr-secondary-color, #4dbc24);
		}
	}

	.affr-cons {
		svg {
			fill: var(--affr-negative, #e02928);
		}
	}
}