.big-table {
  overflow: auto;
  max-width: 100%;
  $row-height: rem(2.25);
  --row-height: #{$row-height}; // when skipping rows, we'll use calc() with data-skip-n-rows
  height: 12 * $row-height;
  max-height: 12 * $row-height;
  font-size: rem(0.875);

  col.row-number {
    // row number
    width: rem(2.5);
  }

  table {
    position: relative; // for sticky headers
    table-layout: fixed; // for speed
    border-spacing: 0;
    width: 1px; // to make table-layout: fixed work
  }

  thead {
    th {
      position: sticky;
      top: 0;
      color: white;
      background: $heading-bg;
      border: 0;
      padding: 0;
      @include content-1;

      // show up above the tbody>tr>th: that also has position:sticky and it's
      // later in the DOM. Must apply to all thead>tr>th, in case we scroll
      // horizontally and the tbody>tr>th "follows" us
      z-index: 1;

      &:first-child {
        left: 0; // stick to the left, like tbody>tr>th
        z-index: 2; // appear above all other thead>tr>th
      }

      &>* {
        border-right: 1px solid composite-colors($dark-accent--strong, $heading-bg);
      }

      .column-name {
        padding: rem(0.625) rem(0.625) rem(0.3125) rem(0.625);
        white-space: pre; // don't wrap; on all-space colnames, consume 1 line height
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .column-type {
        @include info-2;
        padding: 0 rem(0.625) rem(0.625);
      }
    }
  }

  tbody {
    tr {
      height: var(--row-height);
      background: $table-row-background-even;

      &:nth-child(2n) {
        background: $table-row-background-odd;
      }

      &:hover {
        background: $table-row-background-hover;
      }

      &.selected {
        background: $table-row-selected-background-even;

        &:nth-child(2n) {
          background: $table-row-selected-background-odd;
        }

        &:hover {
          background: $table-row-selected-background-hover;
        }
      }
    }

    td,
    th {
      // [2020-11-10, adamhooper] attr(data-n-rows integer) can't be used in calc in latest Chrome/Firefox
      height: var(--row-height);
      padding: 0;
    }

    th {
      // row-number <th>, selected by <col> class
      color: $labels;
      font-weight: 400;
      text-align: center;
      font-size: rem(0.4375); // smallest possible -- this is the fallback
      padding: 0;
      position: sticky;
      left: 0;
      background: inherit;
      z-index: 1; // above tbody>tr>td: td has position:relative and it's later in the DOM

      [data-n-chars='1'],
      [data-n-chars='2'] {
        font-size: rem(0.75);
      }

      [data-n-chars='3'] {
        font-size: rem(0.625);
      }

      [data-n-chars='4'] {
        font-size: rem(0.5625);
      }

      [data-n-chars='5'] {
        font-size: rem(0.5);
      }

      label {
        display: block;
        margin: 0;
        vertical-align: middle;
        cursor: pointer;
        line-height: calc(var(--row-height) - 2px); // subtract border
        border: 1px solid transparent;
        border-right-color: $table-border;

        input {
          display: none;
        }

        span {
          // display: inline-block (default) gives parent height=var(--row-height) + 2px
          // on Chrome 90.0.4430.93 (Linux). display: block does what we expect
          display: block;
        }
      }

      &.focus label {
        border-color: $brand-orange;
      }
    }

    td {
      $cell-border-width: 2px;
      $cell-border-radius: 4px;

      color: $brand-text--darker;
      font-size: rem(.875);
      position: relative; // for <input> positioning

      &.type-number>div {
        text-align: right; // even nulls, which aren't .cell-number
      }

      &>div, &>time, &>a, &>input {
        border: $cell-border-width solid transparent;
        border-radius: $cell-border-radius;
        padding: 0 calc(#{rem(0.5)} - #{$cell-border-width});
      }

      input {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-color: $brand-orange;
        font: inherit;
      }

      &>div, &>a, &>time {
        display: block;
        max-height: var(--row-height);
        height: var(--row-height);
        line-height: calc(var(--row-height) - #{2 * $cell-border-width});
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &>a {
        color: inherit;
      }

      .cell-number {
        .number-prefix,
        .number-suffix {
          @include font-sans-light;
        }

        .number-suffix {
          padding-left: rem(0.125);
        }

        .number-prefix {
          padding-right: rem(0.125);
        }
      }

      .cell-text {
        // The value is already mangled to take only one line. Now, preserve
        // the whitespace within that one line.
        white-space: pre;

        a {
          position: absolute;
          font-size: rem(1); // for icon
          right: $cell-border-width;
          top: $cell-border-width;
          bottom: $cell-border-width;
          border-top-right-radius: $cell-border-radius;
          border-bottom-right-radius: $cell-border-radius;
          border-left: 1px solid $brand-orange;
          padding: 0 rem(.5);
          background: white;
          color: $brand-text--medium;
          &:hover {
            color: inherit;
          }
        }
      }

      .cell-null {
        &::before {
          content: attr(data-text);
        }
        @include font-sans-light;
        color: lighten($brand-text--dark, 30%);
        font-style: italic; // FIXME we don't ship this font as italic
        font-weight: 200;
      }
      

      &.type-text>div {
        // override regular padding to squeeze in a few pixels
        padding-right: 0;
      }

      &.focus>div {
        border-color: $brand-orange;
      }
    }
  }
}
