.table {
  border-collapse: collapse;
  overflow: hidden;
  min-width: 100%;
}

.thead {
  color: var(--Base-Text-High-contrast);
  background-color: var(--Base-Surface-Primary-dark-Normal);
}

.tbody {
  background-color: var(--Base-Surface-Primary-light-Normal);
}

.tr:not(:last-of-type) {
  border-bottom: 1px solid var(--Border-Default);
}

.th {
  padding: var(--Space-x2);
  text-align: left;
}

.td {
  padding: var(--Space-x2);
}

.fixed {
  table-layout: fixed;
}

.smallRadius {
  border-radius: var(--Corner-Radius-sm);
}
.mediumRadius {
  border-radius: var(--Corner-Radius-md);
}
.largeRadius {
  border-radius: var(--Corner-Radius-lg);
}

.content .thead {
  background-color: var(--Surface-Secondary-Hover);
}

.content .tbody {
  background-color: var(--Surface-Primary-OnSurface-Default);
}

.content.striped .tbody .tr:nth-child(odd) {
  background-color: var(--Surface-Secondary-Default);
}
.content.striped .tbody .tr:nth-child(even) {
  background-color: var(--Surface-Primary-OnSurface-Default);
}

@media screen and (min-width: 768px) {
  .th {
    padding: var(--Space-x2) var(--Space-x3);
  }

  .td {
    padding: var(--Space-x3);
  }
}