.DT {
  width: 100%;

  th,
  td {
    overflow-wrap: anywhere;
    padding: var(--gap-m);
    vertical-align: top;
  }

  > thead > tr > th {
    .Text.is-s;

    font-weight: bold;
  }

  > tbody > tr:nth-child(odd) {
    background: var(--color-gray1);
  }
}

.DT.is-compact {
  > thead {
    display: none;
  }

  > tbody > tr {
    display: flex;
    flex-direction: column;

    > td {
      padding-left: 0;
      padding-right: 0;
    }
  }
}

.DT-wrapper.is-scrollable {
  overflow-x: auto;
}

.DT.cell-borders {
  th,
  td {
    border-bottom: solid 1px var(--color-gray3);
    border-right: solid 1px var(--color-gray3);

    &:last-child {
      border-right: none;
    }
  }
}
