.table {
  // Ensure table has a background color by default, plus handle reset
  // of color for nested tables
  background-color: if($table-bg, $table-bg, $body-bg);

  // Ensure child elements inherit their parent element's background color
  // As table child elements do not inherit bg-color by default.
  // Must be defined before any table theme colors are defined
  thead,
  tbody,
  tfoot,
  tr,
  th,
  td {
    background-color: inherit;
  }

  // ...
  // Define table theme background and border color stuff here
  // But no hover/striping stuff, as it is handled below
  // ...

  // Zebra striping (regardless of background color)
  // Also works when cells have their on theme color variant applied
  // table cell backgrounds remain `solid` so if sticky headers/columns is
  // used, the header cells won't show the scrolled table contents through them
  &.table-striped {
    > tbody {
      > tr:nth-of-type(#{$table-striped-order}) {
        // Could do this to reduce the number of rules generated
        // > :nth-child(1n) {
        > td,
        > th {
          // Simple way to "darken" a row, regardless of it's `.table-<variant>` color
          // using transparent black, which is overlayed on top of bg color
          // No need to generate special striping states for each theme color
          background-image: linear-gradient($table-accent-bg, $table-accent-bg);
          background-repeat: no-repeat;
        }
      }
    }

    // Dark mode Zebra striping
    &.table-dark {
      > tbody {
        > tr:nth-of-type(#{$table-striped-order}) {
          // Could do this to reduce the number of rules generated
          // > :nth-child(1n) {
          > td,
          > th {
            // Simple way to "lighten" a row, regardless of it's `.bg-<variant>` color,
            // using transparent white, which is overlayed on top of bg color
            // No need to generate special striping states for each theme color
            background-image: linear-gradient($table-dark-accent-bg, $table-dark-accent-bg);
            background-repeat: no-repeat;
          }
        }
      }
    }
  }

  // Table hover rows  (regardless of background color)
  // Also Works when cells have their on theme color applied
  &.table-hover {
    > tbody {
      > tr:hover {
        // Could do this to reduce the number of rules generated
        // > :nth-child(1n) {
        > td,
        > th {
          // Simple way to "darken" a row, regardless of it's `.table-<variant>` color
          // using transparent black, which is overlayed on top of bg color
          // No need to generate special hover states for each theme color
          background-image: linear-gradient($table-hover-bg, $table-hover-bg);
          background-repeat: no-repeat;
        }
      }
    }

    // Dark mode table hover
    &.table-dark {
      > tbody {
        > tr:hover {
          // Could do this to reduce the number of rules generated
          // > :nth-child(1n) {
          > td,
          > th {
            // Simple way to "lighten" a row, regardless of it's `.bg-<variant>` color
            // using transparent white, which is overlayed on top of bg color
            // No need to generate special hover states for each theme color
            background-image: linear-gradient($table-dark-hover-bg, $table-dark-hover-bg);
            background-repeat: no-repeat;
          }
        }
      }
    }
  }
}