table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;

  caption {
    .visually-hidden();
  }

  tr {
    &.row {
      display: table-row;
    }
  }

  td,
  th {
    &,
    &.col {
      border-bottom: 1px solid @gray-1;
      display: table-cell;
      padding: @default--space @default--space @default--space 0;
      width: auto;

      &:last-child {
        padding-right: 0;
      }
    }
  }

  th {
    .p5;

    color: @black-60;
    text-align: left;
    text-transform: uppercase;
  }

  td {
    .p4;
  }

  thead {
    th {
      &,
      &.col {
        padding-top: 0;
      }
    }
  }
}

.table-responsive() {
  .lt-lg({ &,
  thead,
  tbody,
  tfoot,
  th,
  td,
  td.col,
  tr {
    display: block;
  } & {
      /* Hide table headers (but not display: none;, for accessibility) */
      thead tr {
        .visually-hidden();
      }

      td {
        &,
        &.col {
          border-bottom: 0;
          padding: (@default--space / 4) 0;

          &:last-child {
            border-bottom: 1px solid @gray-1;
            margin-bottom: @default--space;
            padding-bottom: @default--space;
          }

          * {
            .medium;
          }
        }
      }

      td:before,
      td.col:before {
        .p5;

        color: @black-60;
        content: attr(data-th) ':';
        display: inline-block;
        margin-right: @default--space / 2;
        text-align: left;
        text-transform: uppercase;
      }

      td.actions:before,
      td.col.actions:before {
        display: none;
      }
    } });
}
