$ds-cell-bg: lighten(map-get($ds-gray-palette, gray-light), 7.5%);
$ds-cell-bg-hover-1: lighten(map-get($ds-gray-palette, gray-light), 9%);
$ds-cell-bg-hover-2: lighten(map-get($ds-gray-palette, gray-light), 9%);

table.table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 0;

  thead {
    background: map-get($ds-gray-palette, gray-light);
    color: #0a0a0a;

    tr {
      th, td {
        padding: 0.5rem 0.625rem 0.625rem;
      }
    }
  }

  tbody {
    border: 1px solid map-get($ds-gray-palette, gray-lighter);
    background-color: #fefefe;

    tr {
      th, td {
        padding: 0.5rem 0.625rem 0.625rem;
      }
    }
  }

  &:not(.striped) tr:not(:last-child) {
    border: 1px solid #f1f1f1;
  }

  &.striped tbody tr:nth-child(even) {
    border-bottom: 0;
    background-color: $ds-cell-bg;
  }

  &.center {
    tr th, tr td {
      text-align: center;
    }
  }

  &.hover {
    tbody tr:hover {
      background: $ds-cell-bg-hover-1;
    }

    &.striped tbody tr:nth-child(even):hover {
      background: $ds-cell-bg-hover-2;
    }
  }
}