table {
  background: var(--color-background);
  width: 100%;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-align: left;
  border-spacing: 0;
  tr {
    height: var(--table-row-height);
    line-height: var(--table-row-height);
  }
  th {
    font-weight: var(--font-weight-bold);
    &:first-letter {
      text-transform: capitalize;
    }
  }
  th,
  td {
    position: relative;
    border-bottom: var(--table-row-divider);
    padding: 0 0.5rem;
    &.selectable {
      padding-right: 0;
      > * {
        margin: 0;
      }
    }
  }
}

tr {
  &:last-child {
    td {
      border-color: transparent;
    }
  }
  > td {
    > input {
      display: block;
      width: 100%;
      background-color: transparent;
      border: 0;
    }
  }
}

tbody tr:hover {
  background-color: var(--table-row-highlight);
}

.editable > * {
  cursor: pointer;
}