/* Comparison matrix. */

.comparison__scroller {
	/*
	 * position: relative makes this the containing block for the visually
	 * hidden "Yes"/"No" labels in the cells. Without it those absolutely
	 * positioned spans escaped the scroll clip and widened the whole page to
	 * 692px on a phone, giving the site a sideways scroll.
	 */
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* A shadow on the right edge that fades out once scrolled to the end,
	   so it is obvious there is more table off-screen. */
	background:
		linear-gradient(to right, var(--c-white) 30%, rgba(255,255,255,0)) left center,
		linear-gradient(to left,  var(--c-white) 30%, rgba(255,255,255,0)) right center,
		linear-gradient(to right, rgba(11,14,19,0.10), rgba(255,255,255,0)) left center,
		linear-gradient(to left,  rgba(11,14,19,0.10), rgba(255,255,255,0)) right center;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

.comparison__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--fs-sm);
}

.comparison__table th,
.comparison__table td {
	padding: var(--sp-xs) var(--sp-sm);
	border-bottom: 1px solid var(--c-border);
	text-align: left;
	vertical-align: middle;
}

/* Column headers */
.comparison__table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: var(--c-bg-inverse);
	color: var(--c-white);
	border-bottom: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-heading);
	white-space: nowrap;
}

.comparison__table thead th a {
	color: inherit;
	text-decoration: none;
}

.comparison__table thead th a:hover {
	color: var(--c-accent);
	text-decoration: underline;
}

/* The specification column stays visible while the rest scrolls. Without
   this the row labels disappear and the table becomes unreadable. */
.comparison__corner,
.comparison__row-label {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 190px;
	background-color: var(--c-white);
	font-weight: var(--fw-semibold);
}

.comparison__corner {
	z-index: 3;
	background-color: var(--c-bg-inverse);
}

.comparison__row-label {
	border-right: 1px solid var(--c-border);
	color: var(--c-text);
}

.comparison__table tbody tr:nth-child(even) td,
.comparison__table tbody tr:nth-child(even) .comparison__row-label {
	background-color: var(--c-grey-50);
}

.comparison__cell {
	min-width: 150px;
	color: var(--c-text-muted);
	font-variant-numeric: tabular-nums;
}

/* Highlighted column, for the recommended or flagship product. */
.comparison__col.is-highlighted {
	background-color: var(--c-brand);
}

.comparison__cell.is-highlighted {
	background-color: var(--c-brand-tint);
	color: var(--c-text);
	font-weight: var(--fw-medium);
}

.comparison__table tbody tr:nth-child(even) .comparison__cell.is-highlighted {
	background-color: var(--c-brand-tint-dark);
}

/* Yes / no marks. Paired with visually hidden text so the meaning is not
   carried by shape alone. */
.comparison__mark {
	display: inline-block;
	width: 16px;
	height: 16px;
}

.comparison__mark--yes {
	background-color: var(--c-brand);
	clip-path: polygon(14% 48%, 0 62%, 38% 98%, 100% 22%, 86% 10%, 36% 70%);
}

.comparison__mark--no {
	position: relative;
	background-color: var(--c-grey-300);
	clip-path: polygon(0 44%, 100% 44%, 100% 56%, 0 56%);
}

.comparison__hint {
	margin-top: var(--sp-2xs);
	color: var(--c-text-muted);
	font-size: var(--fs-xs);
}

/* The hint is only true when the table actually overflows. */
@media (min-width: 1100px) {
	.comparison__hint {
		display: none;
	}
}