@charset "utf-8";

/* FORMATTED COMPARISON */
.formatted-comparison {
	--comparison-glow: color-mix(in srgb, var(--color-accent) 30%, transparent);
	--comparison-icon: 1.75rem;
	--comparison-center-icon: 3.5rem;
	display: grid;
	gap: var(--space-20);
	grid-template-columns: 1fr;
	margin-block: var(--margin-block);
	position: relative;
	}
.formatted-comparison-card {
	border-radius: calc(var(--radius) * 2);
	padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	}
.formatted-comparison-negative {
	color: var(--color-dimmed);
	}
.formatted-comparison-positive {
	box-shadow: 0 0 3.75rem var(--comparison-glow);
	}
.formatted-comparison-header {
	align-self: flex-end;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-heavy);
	letter-spacing: var(--letter-spacing);
	margin: 0 0 var(--space-10);
	text-transform: var(--headers-sub-case);
	}
	.formatted-comparison-negative .formatted-comparison-header {
		color: var(--color-dimmed);
		}
	.formatted-comparison-positive .formatted-comparison-header {
		color: var(--color-accent);
		}
.formatted-comparison-row {
	align-items: center;
	display: grid;
	font-size: var(--font-size-sm);
	gap: var(--space-20);
	grid-template-columns: var(--comparison-icon) 1fr;
	padding-block: var(--space-10);
	}
.formatted-comparison-row + .formatted-comparison-row {
	border-top: 1px solid var(--background-trim);
	}
.formatted-comparison-mark {
	align-items: center;
	border-radius: 50%;
	display: block;
	height: var(--comparison-icon);
	line-height: var(--comparison-icon);
	text-align: center;
	width: var(--comparison-icon);
	}
	.formatted-comparison-negative .formatted-comparison-mark {
		background-color: var(--background-divider);
		color: var(--color-header);
		}
	.formatted-comparison-positive .formatted-comparison-mark {
		background-color: var(--color-accent);
		color: var(--color-accent-text);
		}
.formatted-comparison-text {
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	text-wrap: balance;
	}
	.formatted-comparison-negative .formatted-comparison-text {
		text-decoration: line-through;
		text-decoration-color: var(--color-bright);
		}
.formatted-comparison-icon {
	background-color: var(--background);
	border-radius: 50%;
	box-shadow: 0 0 1.5rem var(--comparison-glow);
	justify-self: center;
	padding: 0.5rem;
	z-index: 2;
	}
.formatted-comparison-icon-holder {
	align-items: center;
	border-radius: 50%;
	display: flex;
	font-size: var(--icon);
	height: var(--comparison-center-icon);
	justify-content: center;
	width: var(--comparison-center-icon);
	}
.formatted-comparison-icon-holder img,
.formatted-comparison-icon-holder svg {
	height: var(--icon-image);
	width: var(--icon-image);
	}
@media (min-width: 40rem) {
	.formatted-comparison-row {
		padding-block: var(--space-20);
		}
}
@container (max-width: 44.99rem) {
	.formatted-comparison-icon {
		margin-block: calc(var(--space-20) * -1.75);
		}
}
@container (min-width: 45rem) {
	.formatted-comparison {
		gap: 0 var(--space-20);
		grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	.formatted-comparison-card {
		align-items: start;
		display: grid;
		grid-row: 1 / span var(--comparison-rows, 5);
		grid-template-rows: subgrid;
		}
	.formatted-comparison-negative {
		grid-column: 1;
		margin-block: var(--margin-gap) 0;
		}
	.formatted-comparison-positive {
		grid-column: 2;
		margin-block: 0 var(--margin-gap);
		}
	.formatted-comparison-icon {
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		}
}