/*
 * The edition comparison on a product page.
 *
 * A table, because every row asks the same question of each edition — that is
 * what a table is for. It scrolls inside its own box, so a phone never moves
 * the page sideways.
 */

.sx-compare__scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	background: var( --sx-white );
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
	/* Frame and clip on the same element, so the corners cut the table — and
	   so a clipped table stops inflating every ancestor's scrollWidth. */
	contain: paint;
}

.sx-compare__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.sx-compare__table th,
.sx-compare__table td {
	padding: 13px 18px;
	border-bottom: 1px solid var( --sx-border );
	text-align: left;
	vertical-align: top;
	line-height: 1.45;
}

.sx-compare__table thead th {
	position: sticky;
	top: 0;
	background: var( --sx-surface );
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --sx-text-muted );
	white-space: nowrap;
}

/* The three edition columns are narrow and identical in width; the first
   column takes whatever is left, because it holds the sentences. */
.sx-compare__table thead th:not( :first-child ) {
	width: 1%;
	text-align: center;
}

.sx-compare__table thead th a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var( --sx-border-strong );
}

.sx-compare__table thead th a:hover {
	color: var( --sx-brand-text );
	border-bottom-color: currentColor;
}

/* The column the reader is standing in. */
.sx-compare__table thead th.is-current {
	color: var( --sx-brand-text );
	background: var( --sx-brand-50 );
}

.sx-compare__section th {
	padding-top: 20px;
	background: var( --sx-surface );
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --sx-text );
}

.sx-compare__table tbody th[ scope="row" ] {
	font-weight: 500;
	min-width: 0;
	overflow-wrap: break-word;
}

.sx-compare__yes,
.sx-compare__no,
.sx-compare__part {
	text-align: center;
	white-space: nowrap;
}

.sx-compare__yes {
	color: var( --sx-brand );
	font-weight: 700;
}

.sx-compare__no {
	color: var( --sx-text-muted );
}

/* A qualification rather than a tick: "Тільки в окремих базах". It is the one
   cell that carries a sentence, so it wraps. */
.sx-compare__part {
	color: var( --sx-text-secondary );
	font-size: 0.875rem;
	white-space: normal;
	min-width: 9rem;
}

.sx-compare__table tbody tr:last-child th,
.sx-compare__table tbody tr:last-child td {
	border-bottom: 0;
}

@media ( max-width: 780px ) {
	.sx-compare__table th,
	.sx-compare__table td {
		padding: 12px 12px;
	}

	.sx-compare__table {
		font-size: 0.875rem;
	}

	.sx-compare__part {
		min-width: 7rem;
	}
}