<table class="table">
  <thead>
    <tr>
      <td></td>
      <th>Lorem nobis</th>
      <th>Amet repudiandae</th>
      <th>Ipsum earum</th>
      <th>Adipisicing illo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Adipisicing praesentium</th>
      <td>Elit exercitationem</td>
      <td>Amet quam omnis cupiditate reprehenderit iste Debitis facere sint culpa?</td>
      <td>Lorem error tenetur rem fugit culpa voluptates Voluptatibus incidunt modi</td>
      <td>Consectetur sapiente esse animi odio iusto, numquam Illum iusto magnam</td>
    </tr>
    <tr>
      <th>Dolor beatae</th>
      <td>Amet quis quod</td>
      <td>Adipisicing quae alias cum vitae quidem Illo voluptate ratione et!</td>
      <td>Sit recusandae asperiores architecto similique illum cupiditate Neque odit quod?</td>
      <td>Adipisicing ad amet facilis explicabo laborum Necessitatibus tempora eligendi sit</td>
    </tr>
    <tr>
      <th>Amet sit</th>
      <td>Ipsum dolorem rem assumenda</td>
      <td>Elit et enim nostrum voluptate cupiditate minus Libero doloremque error</td>
      <td>Lorem optio consequatur mollitia praesentium repellendus. Harum a repellat error.</td>
      <td>Ipsum pariatur ea ipsam in laboriosam, possimus ratione! Sed numquam!</td>
    </tr>
    <tr>
      <th>Consectetur dolores</th>
      <td>Amet distinctio ullam</td>
      <td>Ipsum esse vitae minus officia asperiores Perspiciatis eos exercitationem possimus</td>
      <td>Lorem dolor vero esse ex minima Explicabo est nisi libero.</td>
      <td>Consectetur quas asperiores in iure vitae Illum reiciendis veritatis ullam?</td>
    </tr>
    <tr>
      <th>Elit incidunt</th>
      <td>Sit iusto</td>
      <td>Amet exercitationem modi dicta suscipit cum Molestias eius quae tenetur.</td>
      <td>Elit inventore aspernatur reprehenderit voluptates quo? Molestiae et dignissimos dolores</td>
      <td>Dolor at eum voluptates eius magni ipsa nemo! Quia enim?</td>
    </tr>
    <tr>
      <th>Lorem adipisicing</th>
      <td>Amet</td>
      <td>Adipisicing odio fugiat aperiam maiores quibusdam Ex odio quibusdam veniam.</td>
      <td>Lorem libero nemo odio cupiditate vel? Dolores dignissimos ad illo.</td>
      <td>Consectetur mollitia quaerat hic iste mollitia. Sint id aliquid eaque.</td>
    </tr>
    <tr>
      <th>Sit elit</th>
      <td>Elit harum dolores voluptatum illo voluptatibus</td>
      <td>Consectetur fuga est asperiores nulla quis Esse repudiandae et maiores</td>
      <td>Lorem nesciunt exercitationem quisquam officia fugit. Iure sapiente beatae iste.</td>
      <td>Ipsum dolor aliquid quis nihil voluptas non Possimus facere vero</td>
    </tr>
    <tr>
      <th>Ipsum vitae</th>
      <td>Adipisicing explicabo quam</td>
      <td>Amet veritatis cumque nemo blanditiis esse? Enim fugiat maxime illo</td>
      <td>Dolor debitis fugit at dolore voluptatum Officia consectetur hic ea</td>
      <td>Ipsum eum dolorum iure debitis blanditiis fuga! Alias sapiente cupiditate.</td>
    </tr>
    <tr>
      <th>Lorem qui</th>
      <td>Elit aspernatur dolor</td>
      <td>Lorem omnis beatae facere aliquam nemo quisquam Accusamus perferendis quaerat.</td>
      <td>Consectetur omnis est voluptatem nihil expedita vero Corporis exercitationem nesciunt.</td>
      <td>Elit est temporibus reprehenderit ullam eum? Deleniti iusto nisi totam?</td>
    </tr>
    <tr>
      <th>Amet reiciendis</th>
      <td>Consectetur lorem aliquam quia odio</td>
      <td>Sit illum animi consequuntur vitae ut. Inventore quidem odit quo?</td>
      <td>Dolor debitis assumenda id cupiditate id Aperiam labore eveniet maxime</td>
      <td>Amet et ut distinctio rem dolore Ducimus voluptatum omnis voluptatem?</td>
    </tr>
  </tbody>
</table>

.table,
.table table {
  border-collapse: collapse;
  margin-bottom: 2rem;

  thead {
    background: var(--color-gray-50);

    th {
      background: var(--color-gray-100);
    }
  }

  tr,
  th {
    transition: background-color var(--root-ease-out-fast);
  }

  td, th {
    padding: 1em 1.5em;
  }

  th {
    text-align: left;
    background: var(--color-gray-50);
  }

  tbody tr:not(:last-child) {
    border-top: 1px solid var(--color-gray-200);
  }

  tr:hover {
    background: var(--accent-color-50);

    th {
      background: var(--accent-color-100);
    }
  }

  &.-scrollable {
    --max-table-fade: 3rem;

    animation-duration: 1ms;
    animation-name: table-fade;
    animation-timeline: --table;
    max-height: clamp(50vh, 640px, 100vh - 2rem);
    max-width: 100%;
    overflow: scroll;
    position: relative;
    scroll-timeline: --table x;

    &.-fadeRight {
      mask-image: linear-gradient(90deg, #fff calc(100% - var(--table-fade)), #0000 100%);
    }

    &.-fadeBoth {
      mask-image: linear-gradient(90deg, #0000, #fff var(--table-starting-fade) calc(100% - var(--table-fade)), #0000 100%);
    }

    &.-stickHead {
      thead {
        background: var(--color-gray-50);
        position: sticky;
        top: 0;
        z-index: 1;
      }
    }

    &.-stickFirstColumn {
      tbody tr th:first-child {
        left: 0;
        position: sticky;
      }
    }

    &.-stickHead.-stickFirstColumn {
      thead tr th:first-child,
      thead tr td:first-child {
        left: 0;
        position: sticky;
        background: var(--color-gray-50);
      }
    }
  }
}

/**
 * --table-fade and --table-starting-fade are used to add fades to the left and
 * right edges of the table when part of the table is scrolled out of view.
 * 
 * They are closely related to --max-table-fade, that sets the fade size.
 */
@property --table-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --table-starting-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@keyframes table-fade {
  0% {
    --table-starting-fade: 0;
    --table-fade: var(--max-table-fade);
  }
  10% {
    --table-starting-fade: var(--max-table-fade);
  }
  90% {
    --table-fade: var(--max-table-fade);
  }
  100% {
    --table-starting-fade: var(--max-table-fade);
    --table-fade: 0;
  }
}