/*
 * Minty'Lab: comparison. `is-on` is set by ml-pd-compare on the column of the
 * selected value.
 */
/* The scroller clips what overflows it, the focus ring of a column included
   (it is drawn outside the button). A gutter as wide as the ring, given back
   by the margin, keeps it whole without moving the table. */
.mpb-pd-cmp__scroll {
    display: block;
    overflow-x: auto;
    padding: var(--spacing-sm);
    margin: calc(var(--spacing-sm) * -1);
}

.mpb-pd-cmp__scroll table {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
}

.mpb-pd-cmp__scroll thead th {
    width: 22%;
    padding: 0 var(--spacing-xs) var(--spacing-md);
    vertical-align: bottom;
}

.mpb-pd-cmp__scroll thead button {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: center;
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-sm);
    border: 0;
    border-radius: var(--border-radius-base);
    background-color: var(--color-surface-elevated);
    color: var(--color-ink);
    transition: background-color var(--transition-base), box-shadow var(--transition-base), color var(--transition-base);
}

.mpb-pd-cmp__scroll thead b {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-card);
    text-transform: uppercase;
}

.mpb-pd-cmp__scroll thead span {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.mpb-pd-cmp__scroll thead em {
    font-size: var(--font-size-xs);
    font-style: normal;
    opacity: 0.7;
}

.mpb-pd-cmp__scroll thead button:hover {
    background-color: var(--chip-bg-hover);
    box-shadow: inset 0 0 0 1px var(--chip-border-hover);
}

/* The chosen column wears the selected chip of the buy column (--chip-*
   tokens of the theme), so a choice reads the same wherever it is made. */
.mpb-pd-cmp__scroll thead th.is-on button {
    background-color: var(--chip-bg-selected);
    box-shadow: inset 0 0 0 var(--chip-border-width-selected) var(--chip-border-selected);
    color: var(--chip-color-selected);
}

.mpb-pd-cmp__scroll thead th.is-on em {
    font-weight: var(--chip-font-weight-selected);
    opacity: 1;
}

.mpb-pd-cmp__scroll tbody th,
.mpb-pd-cmp__scroll tbody td {
    padding: var(--spacing-md) var(--spacing-xs);
    border-top: 1px solid var(--color-line);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    text-align: center;
    transition: background-color var(--transition-base);
}

.mpb-pd-cmp__scroll tbody th {
    color: var(--color-ink-2);
    text-align: left;
}

.mpb-pd-cmp__scroll tbody td.is-on {
    background-color: var(--color-soft);
    font-weight: var(--font-weight-semibold);
}

.mpb-pd-cmp__scroll tbody td.is-yes {
    font-weight: var(--font-weight-bold);
    color: var(--color-mint-3);
}

.mpb-pd-cmp__scroll tbody td.is-no {
    color: var(--color-muted-2);
}