.c-table {
  $self: #{&};
  $wrap: #{$self}-wrap;

  $padding: 6px;
  $border: $g-border;

  $hover-background: rgba(#000, 0.05);

  @at-root {

    #{$wrap} {
      display: block;
      width: 100%;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
    }

    #{$self} {
      width: 100%;
      max-width: 100%;
      border-collapse: collapse;
      background-color: transparent;

      thead {
        border-bottom: 2px nth($border, 2) nth($border, 3);

        th {
          font-size: 1.125rem;
          font-weight: 700;
          vertical-align: middle;
        }

      }

      tbody {
        tr {
          &:hover,
          &:focus {
            background-color: $hover-background;
          }
        }
      }

      tfoot {
        tr,
        td,
        th {
          padding: 0;
        }
      }

      tr {
        border: none;

        &:first-child {
          border-top: none;
        }

        & + tr {
          border-top: $border;
        }
      }

      th, td {
        padding: $padding;
        vertical-align: middle;
        text-align: inherit;
      }

    }

  }

  &.is-width-auto {
    width: auto;
    max-width: 100%;
  }
}