.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(--Base-Border-Subtle);
}

.th {
  padding: var(--Spacing-x2);

  text-align: left;
  text-wrap: nowrap;
}

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

.fixed {
  table-layout: fixed;
}

.smallRadius {
  border-radius: var(--Corner-radius-Small);
}
.mediumRadius {
  border-radius: var(--Corner-radius-Medium);
}
.largeRadius {
  border-radius: var(--Corner-radius-Large);
}

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

.content .tbody {
  background-color: var(--Base-Background-Primary-Normal);
}

.content.striped .tbody .tr:nth-child(odd) {
  background-color: var(--Base-Surface-Subtle-Normal);
}
.content.striped .tbody .tr:nth-child(even) {
  background-color: var(--Base-Background-Primary-Normal);
}

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

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