table {
  vertical-align: middle;
  width: fit-content;
  border-collapse: collapse;
  border-spacing: 0;
}

table.fill {
  width: 100%;
}

td {
  /*background: var(--color-elevated-item-background);*/
}

table.small {
  font-size: 0.9em;

  th {
    padding: 0.5rem;
  }
  td {
    padding: 0.4rem;
  }
}

table.medium {
  th {
    padding: 1rem 0.5rem;
  }
  td {
    padding: 0.5rem;
    background: white;
  }
}

table.large {
  th {
    padding: 2rem 1rem;
  }
  td {
    padding: 1rem;
  }
}

thead {
  vertical-align: inherit;
  /*background: var(--color-background-primary);*/
}

thead.bordered {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

th {
  text-align: left;
}

tbody {
  vertical-align: inherit;
}

tr {
  vertical-align: inherit;

  &:hover {
    background: var(--color-background-primary);
  }
}

tr.bordered {
  border-bottom: 1px solid var(--color-border);
}

tr.selected {
  background: var(--color-background-primary);
}

th {
  vertical-align: inherit;
  padding: 1rem 0.5rem;
}

td {
  vertical-align: inherit;
  padding: 0.5rem;
}

th.bordered {
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}

td.bordered {
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}
