.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;

  /**
    Some tables are scrolled into view if the row count changes. Usually `scroll-padding` is used on the body to ensure
    elements don't end up under the fixed header, but the library scroll-into-view-if-needed only supports `scroll-margin`.
    TODO: remove once library supports `scroll-margin` or the library is not needed anymore (=when FF supports if-needed)
  */
  scroll-margin-top: 32px;
}

.tableAuto {
  composes: table;
  width: auto;
}

.table > thead > tr > th,
.table > tfoot > tr:first-child > td {
  padding: 8px 16px;
  font-weight: 500;
  text-align: left;
  background: var(--color-background);
  position: sticky;
  z-index: 1;
  white-space: nowrap;
}

.table > thead > tr > th {
  border-bottom: 3px solid var(--color-border);
  top: var(--table-sticky-top, 48px);
}
.table > tfoot > tr:first-child > td {
  border-top: 3px solid var(--color-border);
  bottom: 0;
  z-index: 0;
  margin-top: 32px;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr:nth-child(n+2) > td,
.table > tfoot > tr:nth-child(n+2) > th {
  padding: 8px 16px;
  font-weight: normal;
  line-height: 1.5;
  text-align: left;
  transition: background-color .1s ease;

  /* set height to 1px. this get ignored by browsers, but allows childs to use height: 100% */
  height: 1px;
}

.table > thead > tr > th[align=right],
.table > tfoot > tr > td[align=right],
.table > tbody > tr > td[align=right],
.table > tbody > tr > th[align=right] {
  text-align: right;
  font-feature-settings: "tnum" 1;
}

.table > tbody > tr + tr > td,
.table > tbody > tr + tr > th,
.table > tfoot > tr + tr > td,
.table > tfoot > tr + tr > th,
.table > tbody + tbody > tr > th,
.table > tbody + tbody > tr > td {
  border-top: 1px solid var(--color-border);
}

.table > tbody > tr > [rowspan]:not(:has(~ [rowspan])) {
  border-right: 1px solid var(--color-border);
}

.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th,
.table > tbody:hover > tr > [rowspan] {
  background-color: var(--color-background-light);
}

.table > tbody > tr[data-added] > td,
.table > tbody > tr[data-added] > th {
  background-color: var(--color-diff-added-light);
}

.table > tbody > tr[data-added]:hover > td,
.table > tbody > tr[data-added]:hover > th {
  background-color: var(--color-diff-added);
}

.table > tbody > tr[data-removed] > td,
.table > tbody > tr[data-removed] > th {
  background-color: var(--color-diff-removed-light);
}

.table > tbody > tr[data-removed]:hover > td,
.table > tbody > tr[data-removed]:hover > th {
  background-color: var(--color-diff-removed);
}

.button {
  /* remove button styles */
  composes: reset from '../../reset.module.css';

  border-radius: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}

.sortButton {
  composes: button;

  display: block;
  width: calc(100% + 32px);
  margin: -8px -16px;
  padding: 8px 16px;
  text-align: inherit;
  border-radius: 2px;
}

.sortIcon {
  color: var(--color-text-muted);
  margin-left: 8px;
}

.sortButton:hover .sortIcon {
  color: var(--color-text);
}

.sortButton:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.group {
  font-weight: 500;
  background-color: var(--color-background-light);
}

.wrapper {
  width: calc(100% + 32px);
  margin: 0 -16px 16px;
  padding: 0 16px;
}

.noOverflow {
  overflow: clip;
}

.overflow {
  overflow-x: scroll;
  will-change: scroll-position;
  scrollbar-width: thin;
}

.overflow > .table > thead > tr > th { position: static; }

@media(max-width: 760px) {
  .table { width: max-content; min-width: 100%; }
}

.small {
  width: 1px;
}