.plan-table {
  $well-padding: rem(1.5);
  $well-gutter: rem(1);
  $data-line-height: rem(1.5);

  overflow: visible auto;

  @mixin plan-table-well() {
    // A <div> inside a <td> that has height:100%....
    // Appears as a "well": nestled in a border, with padding and a
    // left margin. Meant to be stacked vertically.
    //
    // For top/bottom, callers should set border-top-width: 1px,
    // border-top-left-radius: 3px, border-top-right-radius: 3px.
    height: 100%;
    border: 1px solid $table-border;
    border-top-width: 0;
    border-bottom-width: 0;
    padding: $well-padding;
    margin-left: $well-gutter;
    background: white;
  }

  table {
    table-layout: fixed;
    border-collapse: collapse;
    min-width: 100%;
    height: 1px; // so <div> in <td> can have height:100%: https://stackoverflow.com/a/22220780
  }

  th,
  td {
    height: 100%; // so divs inside can have height:100%;
    padding: 0;
    white-space: nowrap; // scroll, don't wrap, on mobile (least-ugly of the two ugly options)
  }

  thead {
    th {
      width: 33%;

      & > div {
        @include plan-table-well();
        flex-direction: column;
        align-items: flex-start;
        border-top-width: 1px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
      }

      .price {
        margin-top: rem(1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        @include title-2;
        color: $brand-learn;
      }

      div.current {
        margin-top: rem(1);
      }

      button,
      a {
        @include action-button;
        @include button-pink-fill;
      }

      button {
        margin-left: rem(1);
      }

      a {
        margin-top: rem(1);
      }
    }
  }

  tbody {
    h3,
    p {
      margin: 0;
      line-height: $data-line-height;
    }

    th,
    td {
      border-bottom: 1px solid $table-border;
    }

    th {
      // Move the baseline up by a bit to account for the difference in font
      // size between <h3> (here) and <td> (next cell). Depends on the font
      // (Roboto Sans), the two sizes (defined elsewhere), and the rendering
      // engine (which we can't control).
      $baseline_tweak: -0.15rem; // 2021-02-05 looks good on Chrome 88 on Fedora Linux.

      // We move the baseline using padding. We need to also adjust the
      // _bottom_ padding so that a <th><h3></h3></th> remains vertically
      // centered.
      $well-padding-with-baseline-tweak: $well-padding + $baseline_tweak;
      padding: $well-padding-with-baseline-tweak $well-padding
        $well-padding-with-baseline-tweak 0; // line up with <td>
    }

    td > div {
      @include plan-table-well();
      line-height: $data-line-height;
    }

    tr:last-child td > div {
      // border-bottom-width: 0px means the rounded border isn't perfect.
      // But it's close enough. (The <td> has its own border-bottom, and the
      // effect we're going for is for one border to be "on top of" the other.)
      border-bottom-width: 0;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
    }
  }
}
