.tableHeader {
  display: table;
  width: 100%;
}

.tableHeaderRow {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.tableHeaderCellContent {
  display: flex;
  align-items: center;
  height: var(--grapes-unit-32);
  max-height: var(--grapes-unit-32);
}

.tableHeaderCellContentSort {
  width: 100%;
  margin: var(--grapes-unit-4) 0;
  padding: var(--grapes-unit-8);
  position: relative;
  left: calc(-1 * var(--grapes-unit-8));
}

.tableHeaderCellContentSort:hover {
  background-color: var(--grapes-color-background-primary-hover);
  padding: var(--grapes-unit-8);
  border-radius: var(--grapes-border-radius-4);
  cursor: pointer;
}

.tableHeaderCellContentAlignRight {
  float: right;
}

.tableHeaderCellContentSort.tableHeaderCellContentAlignRight {
  right: calc(-1 * var(--grapes-unit-8));
  left: initial;
}

.tableHeaderCellContentAlignRight:hover {
  margin-left: 0;
}

.tableHeaderSortIcons {
  display: flex;
  flex-direction: column;
  width: var(--grapes-unit-12);
  margin-left: auto;
}

.tableHeaderCellSortIcon {
  margin-left: var(--grapes-unit-4);
}

.tableHeaderCellSortIconDown {
  margin-top: -6px;
}

.tableBody {
  display: block;
  width: 100%;
}

.tableBodyWithMaxHeight {
  overflow: auto;
}

.tableBodyGroupedCell {
  min-height: var(--grapes-unit-32);
  box-sizing: border-box;
  padding: 0 var(--grapes-unit-16);
  font: var(--grapes-body-s);
  color: var(--grapes-color-content-secondary-bg-secondary);
  background-color: var(--grapes-color-background-secondary-default);
  border-bottom: 1px solid var(--grapes-color-border-default);
}

.tableBodyRow {
  display: table;
  table-layout: fixed;
  width: 100%;

  .primaryTableBodyCell {
    background-color: var(--grapes-color-background-primary-selected);
  }

  .alertTableBodyCell {
    background-color: var(--grapes-color-background-secondary-alert-default);
  }

  .infoTableBodyCell {
    background-color: var(--grapes-color-background-secondary-info-default);
  }

  .successTableBodyCell {
    background-color: var(--grapes-color-background-secondary-success-default);
  }

  .warningTableBodyCell {
    background-color: var(--grapes-color-background-secondary-warning-default);
  }
}

.clickableTableBodyRow:hover {
  transition: background-color var(--grapes-transition-duration)
    var(--grapes-transition-timing-function);
  cursor: pointer;

  &:not(.activeTableBodyRow):hover {
    background-color: var(--grapes-color-background-primary-hover);
  }
}

.disabledTableBodyRow {
  cursor: not-allowed;
  background-color: var(--grapes-color-background-primary-disabled);
}

.primaryTableBodyRow,
.activeTableBodyRow {
  background-color: var(--grapes-color-background-secondary-brand-default);
}

.infoTableBodyRow {
  background-color: var(--grapes-color-background-secondary-info-default);
}

.warningTableBodyRow {
  background-color: var(--grapes-color-background-secondary-warning-default);
}

.alertTableBodyRow {
  background-color: var(--grapes-color-background-secondary-alert-default);
}

.successTableBodyRow {
  background-color: var(--grapes-color-background-secondary-success-default);
}

.tableFooterRow,
.tableEmptyState {
  display: table;
  width: 100%;
}

.tableFooterCell,
.tableEmptyStateCell {
  padding: var(--grapes-unit-16);
  text-align: center;
}

.tableEmptyStateCell {
  padding: var(--grapes-unit-64) 0;
}
.tableEmptyStateTitle {
  font: var(--grapes-title-l);
  color: var(--grapes-color-content-primary);
}
.tableEmptyStateSubtitle {
  font: var(--grapes-body-m);
  color: var(--grapes-color-content-secondary-bg-primary);
}

.tableCellWrapper {
  display: flex;
  align-items: center;
}

.tableCheckboxCell {
  padding: 0;
  /* Center the checkbox.
  Between the checkbox and the text of the next cell, we want a total of 16px.
  By default, it's 32px ( padding * 2 )
  And because we want the clickable region of the checbkox to be as big as possible,
  we're updating the padding of the next cell instead */
  & + th,
  & + td {
    padding-left: 0;
  }
}

.tableCheckboxLabel {
  cursor: pointer;
  display: inline-flex;
  padding: var(--grapes-unit-16);
}

.tableCheckboxLabelHeader {
  display: inline-block;
  padding: var(--grapes-unit-4) var(--grapes-unit-16);
}