.summary-stats-table {
    margin: var(--border-m);

    /* "collapse" prevents reliably showing the right border of the sticky
       column when it overlaps others */
    border-collapse: separate;

    /* Avoid a border twice as thick on the left of the table due to separate
       border (there is already a left border on the table cells). */
    border-left: none;
}

.relative {
    position: relative;
}

/* pure.css puts the border on the left of each cell, but we want one on the
   right of the second column which will overlap other columns. */
#report .summary-stats-table tr > :is(th, td):nth-child(3){
    border-left: none;
}

/* Make the second column sticky and allow it to overlap others. */
#report .summary-stats-table tr > :is(th, td):nth-child(2) {

    /* We allow part of the column to be hidden to save space; seeing the end of
       the column name should be enough to recognize to which column a row
       belongs. */
    --left-overlap: calc(4 * var(--base-size));

    position: sticky;
    left: calc(-1 * var(--left-overlap));
    z-index: 10;

    text-align: right;
    max-width: calc(min(30ch, var(--left-overlap) + 40vw));

    border-right: 1px solid #cbcbcb;
    box-shadow: 0px 0 0 0 #aaa;
    transition: box-shadow 200ms;
}

/* Draw a larger & darker border when the 2nd column is overlapping others. */
#report [data-is-scrolling] > .summary-stats-table tr > :is(th, td):nth-child(2) {
    box-shadow: 2px 0 0 0 #aaa;
    transition: box-shadow 400ms;
}

/* Elements in the 2nd column should have an opaque background as they overlap
   others. */

#report .summary-stats-table tr > td:nth-child(2) {
    background: white;
}

#report .summary-stats-table tr > th:nth-child(2) {
    background: #e0e0e0;
}

#report th.sort-button-group-wrapper {
    --btn-width: var(--button-m);
    --btn-group-width: calc(var(--btn-width) * 2);
    position: relative;
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);
    padding-right: calc(var(--space-m) + var(--btn-group-width));
}

.sort-button-group {
    position: absolute;
    top: 0;
    bottom: var(--border-s);
    right: calc(-1 * var(--btn-group-width));
    left: 100%;
    transform: translateX(calc(-1 * var(--btn-group-width)));
    display: flex;
    gap: 0px;
    padding: 0px;
}

.sort-button {
    margin: 0;
    box-sizing: border-box;
    height: 100%;
    flex-grow: 1;
    border-radius: 0;
    border: var(--border-s) solid #aaa;
    background: #e0e0e0;
    color: #222;
    padding: var(--space-s);
}

.sort-button-group > .sort-button:focus-visible {
    z-index: 2;
}

.sort-button-group > .sort-button ~ .sort-button {
    margin-left: calc(-1 * var(--border-s));
}

.sort-button:hover {
    background: #eeeeee;
}

.sort-button:active {
    background: #cccccc;
}

.sort-button[data-is-active]{
    background: var(--lightgreen);
    color: black;
}
