:root {
  --table-border-size: var(--border-size-1, 1px);
  --table-border-color: light-dark(var(--color-3, #eee), var(--color-10,#666));

  --table-padding-block: 0.25rem;
  --table-padding-inline: 0.66rem;

  --table-head-background-color: light-dark(var(--color-1, #e9e9e9), var(--color-10,#666));
  --table-head-color: light-dark(var(--color-15, CanvasText), var(--color-2));

  --tbody-tr-even-background-color: light-dark(var(--color-1, #eee), var(--color-15,#333));
  --tbody-tr-even-color: light-dark(var(--color-15, #333), var(--color-1, #eee));
  --tbody-tr-odd-background-color: light-dark(var(--color-2, #fafafa), var(--color-12,#444));
  --tbody-tr-odd-color: light-dark(var(--color-15, #333), var(--color-1, #eee));
}

table {
  border-collapse: collapse;
  width: 100%;

  &.adjusted {
    width: auto !important;
  }

  caption {
    text-transform: uppercase;
    font-size: 0.8rem;
    text-align: center;
    padding: var(--table-padding-block) var(--table-padding-inline);
  }

  td,
  th,
  math,
  time[datetime*=":"] {
    font-variant-numeric: tabular-nums lining-nums slashed-zero;
  }

  th, td {
    text-align: left;
    &.center { text-align: center; }
    &.right { text-align: right; }
  }

  th {
    padding: var(--table-padding-block) var(--table-padding-inline);
  }

  td {
    padding: var(--table-padding-block) var(--table-padding-inline);
  }
}

table.light-borders {

  th, td {
    padding-block: var(--table-padding-block);
    box-shadow: 0 var(--table-border-size) 0 0 var(--table-border-color) inset;
  }

}

table.full-borders {
  border: var(--table-border-size) solid var(--table-border-color);

  th, td {
    border: var(--table-border-size) solid var(--table-border-color);
  }

  thead, tfoot {
    background-color: var(--table-head-background-color);
  }

}

table.alternating {

  thead, tfoot {
    background-color: var(--table-head-background-color);
  }

  tbody tr:nth-child(2n)   {
    background-color: var(--tbody-tr-even-background-color);
    color: var(--tbody-tr-even-color);
  }

  tbody tr:nth-child(2n+1)  {
    background-color: var(--tbody-tr-odd-background-color);
    color: var(--tbody-tr-odd-color);
  }
}


table {
  th.amount,
  td.amount {
    text-align: right;
  }

  th.quantity,
  td.quantity {
    text-align: center;
  }

}