/* Comparison table: raw template. Only variables generated by theme.json. */

.bank-comparison__scroll {
	/* Positioned: the visually hidden texts of the table stay inside the scrolling box. */
	position: relative;
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--bank--radius);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.bank-comparison__scroll:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.bank-comparison__table {
	width: 100%;
	min-width: 36rem;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--medium);
}

.bank-comparison__table th,
.bank-comparison__table td {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: center;
	vertical-align: middle;
}

.bank-comparison__table tbody tr:last-child > * {
	border-bottom: 0;
}

.bank-comparison__table th[scope="row"],
.bank-comparison__table .bank-comparison__criterion {
	text-align: left;
	font-weight: 500;
}

.bank-comparison__table thead th {
	background-color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* The highlighted option: a tinted column with a strong head. */
.bank-comparison__table .is-highlighted {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 8%, var(--wp--preset--color--base));
	font-weight: 700;
}

.bank-comparison__table thead .is-highlighted {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

/* Yes: a tick in a filled disc. No: a short dash. The word is there for screen readers. */
.bank-comparison__mark {
	position: relative;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	vertical-align: middle;
}

.bank-comparison__cell--yes .bank-comparison__mark {
	background-color: var(--wp--preset--color--primary);
}

.bank-comparison__cell--yes .bank-comparison__mark::after {
	content: "";
	position: absolute;
	top: 22%;
	left: 37%;
	width: 26%;
	height: 46%;
	border: solid var(--wp--preset--color--on-primary);
	border-width: 0 0.16em 0.16em 0;
	transform: rotate(40deg);
}

.bank-comparison__cell--no .bank-comparison__mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 25%;
	width: 50%;
	border-top: 0.14em solid var(--wp--preset--color--muted);
}

.bank-comparison__note {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.bank-is-dark .bank-comparison__note {
	color: inherit;
}

/* Narrow screens: the table scrolls sideways and the criterion stays in view. */
@media (max-width: 47.99em) {
	.bank-comparison__table {
		font-size: var(--wp--preset--font-size--small);
	}

	.bank-comparison__table th,
	.bank-comparison__table td {
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	}

	.bank-comparison__table th[scope="row"],
	.bank-comparison__table .bank-comparison__criterion {
		position: sticky;
		left: 0;
		z-index: 1;
		max-width: 9.5rem;
		border-right: 1px solid var(--wp--preset--color--border);
		background-color: var(--wp--preset--color--base);
	}

	.bank-comparison__table thead .bank-comparison__criterion {
		background-color: var(--wp--preset--color--surface);
	}
}