@use "@infineon/design-system-tokens/dist/tokens";

.ifx {
  &__thead {    
    &__background-color {
      background-color: tokens.$color-gray-300;
      color: tokens.$color-text-black;
    }
  }
} 

.table {
  width: auto;
  margin-bottom: 0;
}

.table > :not(:first-of-type) {
  border-top: none;
}

.table > :not(caption) > * > * {
  padding: 6px 24px;
}

.table-sm > :not(caption) > * > * {
  padding: 3px 24px;
}

thead {
  border-bottom: 2px solid tokens.$color-gray-300;
}

th {
  white-space: nowrap;
  font-weight: 600;
}

.table-striped > tbody > tr:nth-of-type(2n+1) > * {
  --bs-table-accent-bg: transparent;
}

.table-striped > tbody > tr:nth-of-type(2n+2) > * {
  background-color: var(--bs-table-striped-bg);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--bs-table-hover-bg);
}

td {
  font-size: 13px;
}

.table caption {
  color: tokens.$color-text-black;
  padding: 16px 0 0 0;
}