.table,
.table-wrapper {
  --table-text: var(--color-text);
  --table-radius: 0;
  --table-border-color: var(--color-grey-900);
  --table-bg: var(--color-grey-50);
  --table-soft-text: var(--color-grey-500);
  --table-fs: var(--scale-000);
  --table-th-bg: var(--color-grey-200);
  --table-ga-bg: var(--color-grey-200);
  --table-th-ga-bg: var(--color-grey-400);
  --table-border-size: 2px;

  border: var(--table-border-size) solid var(--color-text);
  border-radius: var(--table-radius);
}

@media (prefers-color-scheme: dark) {
  .table,
  .table-wrapper {
    --table-text: var(--color-bg);
  }
}

.table-wrapper {
  display: block;
  overflow: auto;
  background-color: var(--table-bg);

  /* Hide scrollbar for Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--table-text) transparent;
}
.table-wrapper::-webkit-scrollbar {
  width: var(--size-2);
  height: var(--size-2);
}
.table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.table-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--table-text);
  opacity: 0.7;
  border-radius: 20px;
  border: transparent;
}

.table {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--table-fs);
  background-color: var(--table-bg);
}
.table-wrapper .table {
  border: none;
}

.table__thead {
  display: table-header-group;
}

.table__tbody {
  display: table-row-group;
}

.table__tr {
  display: table-row;
}

.table__td[class*="is-sticky"],
.table__th[class*="is-sticky"] {
  position: sticky;
  z-index: 1;
}
.table__td.is-sticky-left,
.table__th.is-sticky-left {
  left: 0;
}
.table__td.is-sticky-right,
.table__th.is-sticky-right {
  right: 0;
}

.table__th {
  display: table-cell;
  font-weight: var(--weight-medium);
  color: var(--table-text);
  text-align: right;
  white-space: nowrap;
  padding: var(--size-1) var(--size-2);
  border-bottom: 1px solid var(--table-border-color);
  border-collapse: collapse;
  background-color: var(--table-th-bg);
}
.table__thead {
  position: sticky;
  top: 0;
  z-index: 5;
}
.table__th:first-child {
  position: sticky;
  left: 0;
  padding-left: var(--size-2);
  text-align: right;
  border-right: 1px solid var(--table-border-color);
}
.table__tr:first-child .table__th:first-child {
  border-top-left-radius: var(--table-radius);
}
.table__tr:first-child .table__th:last-child {
  border-top-right-radius: var(--table-radius);
}
.table__tr:not(:last-child) .table__th {
  border-bottom-color: var(--color-grey-300);
  border-bottom: none;
  padding-bottom: 0;
}
.table__th.is-gap-analysis-summary {
  background-color: var(--table-th-ga-bg);
}

.table__td {
  display: table-cell;
  padding: var(--size-1) var(--size-2);
  border-bottom: 1px solid var(--table-border-color);
  padding-left: var(--size-2);
  border-collapse: collapse;
  color: var(--table-text);
  background-color: var(--table-bg);
  text-align: right;
}
.table__td:first-child {
  text-align: right;
  white-space: nowrap;
  border-right: 1px solid var(--table-border-color);
  background-color: var(--table-bg);
}
.table__tr:last-child .table__td:first-child {
  border-bottom-left-radius: var(--table-radius);
}
.table__tr:last-child .table__td:last-child {
  border-bottom-right-radius: var(--table-radius);
}
.table__tr:last-child .table__td {
  border-bottom: none;
}
.table__tr.is-rollup .table__td {
  font-weight: var(--weight-light);
  color: var(--table-soft-text);
}
.table__tr.is-input .table__td {
  font-weight: var(--weight-light);
  padding-bottom: 0;
  border-bottom: none;
  color: var(--table-soft-text);
}
.table__td.is-gap-analysis-summary {
  background-color: var(--table-ga-bg);
}