.nes-table-responsive {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.nes-table {
  table-layout: fixed;
  background-color: $background-color;

  tr {
    margin-left: -0.25em;
  }

  th,
  td {
    position: relative;
    padding: 0.5rem;
    word-wrap: break-word;
    border-color: $base-color;
    border-style: solid;
    border-width: 0 0.25em 0.25em 0;

    &:last-child {
      border-right-width: 0;
    }

    &::after,
    &::before {
      position: absolute;
      display: block;
      width: 0.25em;
      height: 0.25em;
      content: "";
      background-color: $base-color;
    }

    &::after {
      bottom: -0.25em;
      left: -0.25em;
    }

    &::before {
      top: -0.25em;
      right: -0.25em;
    }

    &:last-child::before {
      top: initial;
      bottom: -0.25em;
    }
  }

  &.is-centered th {
    text-align: center;
  }

  &.is-bordered {
    margin: 4px;
    border-spacing: 0;
    border-collapse: separate;

    @include compact-rounded-corners();
  }

  &.is-dark {
    color: $background-color;
    background-color: $base-color;

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: "";
    }

    &.is-bordered {
      @include compact-rounded-corners(true);
    }

    th,
    td {
      border-color: $background-color;

      &::after,
      &::before {
        display: none;
      }
    }
  }

  /***************************************************************************  \
    This eliminates the gap between the last row in a table and the border, as
    well as hiding the derelict pixels in the bottom right and bottom left of
    the last row of a table
  \  ***************************************************************************/
  tbody,
  thead:last-child {
    tr:last-child {
      th,
      td {
        border-bottom-width: 0;

        &:first-child::after,
        &:last-child::before {
          display: none;
        }
      }
    }
  }
}