/*! Tables */
:root {
  --table-border-color: var(--component-border-color);
  --table-border-width: var(--component-border-width);
  --table-header-bg-color: transparent;
  --table-stripe-bg-color: var(--component-bg-color);
  --table-hover-color: var(--color-white);
  --table-hover-bg-color: var(--state-primary);
  --table-spacing-x: .75rem;
  --table-spacing-y: .5rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

table caption {
  caption-side: bottom;
  font-size: var(--font-size-small);
  color: var(--state-secondary);
  text-align: center;
  padding-top: var(--table-spacing-y);
}

table th {
  text-align: left;
  background: var(--table-header-bg-color);
  border-bottom: solid calc(var(--table-border-width) * 2) var(--table-border-color);
  padding: var(--table-spacing-y) var(--table-spacing-x);
}

table td {
  border-bottom: solid var(--table-border-width) var(--table-border-color);
  padding: var(--table-spacing-y) var(--table-spacing-x);
}

table.table-striped tr:nth-child(odd) td {
  background-color: var(--table-stripe-bg-color);
}

table.table-bordered {
  border: solid var(--table-border-width) var(--table-border-color);
}

table.table-bordered td {
  border-style: solid;
  border-width: var(--table-border-width);
  border-color: var(--table-border-color);
}

table.table-hoverable tbody tr:hover td {
  color: var(--table-hover-color);
  background-color: var(--table-hover-bg-color);
}