/*
<table class="table">
</table>
*/
th,
td {
  text-align: left; /* yea */
}

.table {
  & {
    width: 100%;
    max-width: 100%;
    background: $brand-white;
  }

  &.-striped > tbody > tr:nth-child(odd) > td { background: $brand-gray-lt; }
  &.-striped > tbody > tr:nth-child(even) > td { background: $brand-white; }
  &.-striped.-hovered > tbody > tr:hover > td { background: $brand-gray; }

  // &.-striped.-hovered > tbody > tr:hover > td {
    // background: $off-gray;
    // border-left-color: $off-gray;
  // }

  & > thead > tr > th,
  & > tbody > tr > td {
    border-top: 1px solid $brand-gray;
    border-bottom: 1px solid $brand-gray;
    padding: 10px;
  }

  & > thead > tr + tr > th {
    padding-top: 0;
  }

  &.-bordered > thead > tr > th:not(:first-child),
  &.-bordered > tbody > tr > td:not(:first-child) {
    border-left: 1px solid $brand-gray;
  }

  &.-bordered > thead > tr > th:first-child,
  &.-bordered > tbody > tr > td:first-child {
    border-left: 1px solid $brand-gray;
  }

  &.-bordered > thead > tr > th:last-child,
  &.-bordered > tbody > tr > td:last-child {
    border-right: 1px solid $brand-gray;
  }

  &.-hovered > tbody > tr:hover > td { background: $brand-gray-lt; }

  & > thead > tr > th.-align-right,
  & > tbody > tr > td.-align-right {
    text-align: right;
  }

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

  & > thead > tr > th.-align-middle,
  & > tbody > tr > td.-align-middle {
    vertical-align: top;
  }

  > tbody > tr > td.-sky { background: $brand-sky; }
  > tbody > tr > td.-emerald { background: $brand-emerald; }
  > tbody > tr > td.-sun { background: $brand-sun; }
  > tbody > tr > td.-crimson { background: $brand-crimson; }
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  color: $brand-black;
}