/*********/
/* TABLE */
/*********/

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* nowrap */
.table--nowrap tr > * {
  white-space:nowrap;
}

@container main (width < 20em) {
  .table--nowrap tr > * {
    white-space:normal;
  }
}


/* cells */
th,
td {
  padding:.25em 1.5em .25em .5em;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}

.table--condensed th,
.table--condensed td {
  padding:.25em .5em;
}

th {
  text-align:left;
}

tbody th {
  font-weight:400;
}

td:empty::after {
  content:"--";
}

.table--lines th,
.table--lines td {
  border-top:solid 1px currentcolor;
  border-bottom:solid 1px currentcolor;
}

.table--all-lines th,
.table--all-lines td {
  border:solid 1px currentcolor;
}




/* nowrap */
.table__cell--nowrap {
  white-space:nowrap;
}

@container main (width < 20em) {
  .table__cell--nowrap {
    white-space:normal;
  }
}


/* sticky */
.table__cell--sticky,
.table--all-lines .table__cell--sticky {
  position:sticky;
  left:0;
  z-index:1;

  background-color: var(--bg-root);
  border-left:none;
  border-right:none;
}

.table__cell--sticky::before,
.table--all-lines .table__cell--sticky::before {
  content:"";
  position:absolute;
  width:1px;
  left:0;
  top:0;
  bottom:0;
  background-color:currentColor;
}

.table__cell--sticky::after,
.table--all-lines .table__cell--sticky::after {
  content:"";
  position:absolute;
  width:1px;
  right:0;
  top:0;
  bottom:0;
  background-color:currentColor;
}


/* sticky empty */ 
.table__cell--sticky--empty,
.table--all-lines .table__cell--sticky--empty {
  position:sticky;
  left:0;
  z-index:1;

  background-color: var(--bg-root);
  border:none;
}


.table__cell--sticky--empty::after,
.table--all-lines .table__cell--sticky--empty::after {
  content:"";
  position:absolute;
  width:1px;
  right:0;
  top:0;
  bottom:0;
  background-color:currentColor;
}



/* after sticky */
.table__cell--next,
.table--all-lines .table__cell--next {
  border-left:none;
}


/* last */
.table__cell--last,
.table--all-lines .table__cell--last {
  position: relative;
  border-right:none;
}

.table__cell--last::before,
.table--all-lines.table__cell--last::before {
  content:"";
  position:absolute;
  width:1px;
  right:0;
  top:0;
  bottom:0;
  background-color:currentColor;
}


/* top */
.table__cell--top,
.table--all-lines .table__cell--top  {
  position: relative;
  border-top:none;
}

.table__cell--top::after,
.table--all-lines .table__cell--top::after {
  content:"";
  position:absolute;
  height:1px;
  right:0;
  left:0;
  top:0;
  background-color:currentColor;
}