Tabel: Horizontaal

$table-border: 1px solid $grey-light;
$table-stack-breakpoint: $tablet-portrait;
$table-title-width: math.div($tablet-portrait, 3);

table,
.table {
  width: 100%;
  margin: $space-m 0;
  border-collapse: collapse;
  border-bottom: $table-border;
  font-feature-settings: 'tnum';

  p {
    margin-top: $space-xs;
    margin-bottom: $space-xs;
  }
}

thead {
  border-bottom: $table-border;
}

caption,
th,
td {
  padding: $space-xs $space-s;
}

th,
td {
  font-size: $fs-down-1;
  vertical-align: top;
}

td {
  width: 100%;

  @media (min-width: $phablet) {
    width: auto;
  }
}

caption {
  text-align: left;
  font-family: $font-serif;
  font-weight: $fw-bold;
}

th,
.table__title {
  font-family: $font-serif;
  font-weight: $fw-bold;
  color: $green;
  text-align: left;
}

thead,
tbody {

  tr {
    border-top: $table-border;

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

    &:nth-child(even) {

      td {
        background-color: $grey-lighter;
      }

      th ~ td {
        background-color: inherit;
      }
    }

    + tr.table__row--collapsible {
      border-top: none;
    }
  }
}

tbody {

  th,
  td {
    float: left;
  }

  tr {
    vertical-align: top;
  }

  th {
    width: 100%;
    padding: $space-xs $space-s 0;

    + td {
      padding: 0 $space-s $space-xs;
    }
  }

  @media (min-width: $phablet) {

    th,
    td {
      float: none;
    }

    th {
      width: $table-title-width;
      padding-bottom: $space-xs;

      + td {
        padding-top: $space-xs;
      }
    }
  }
}

tfoot {
  border-top: 2px solid $grey-light;;

  tr {
    border-bottom: $table-border;
  }

  th,
  td {
    text-align: left;
  }

  th {
    font-weight: $fw-bold;
  }
}

/**
 * Stack
 */
.table--stack {
  // Remove semantics on mobile; this effectively removes the table semantics from the table, because on mobile, we
  // don't display it as a table
  display: block;

  tr,
  td {
    // Remove semantics on mobile; this effectively removes the table semantics from the table, because on mobile, we
    // don't display it as a table row / cell
    display: block;
  }

  tr:after {
    // Allow tr that is not table-row display to grow in height by its contents. This fixes border-top problem
    // collapsing to te top.
    content: " ";
    display: block;
    clear: both;
  }

  .align-right {
    text-align: left;
  }

  thead th,
  tfoot th {
    display: none;
  }

  td {
    width: 100%;
    display: block;
    float: left;
  }

  .table__title,
  .table__content {
    display: block;
    width: 100%;
    vertical-align: top;
  }

  .table__empty-cell {
    display: none;
  }

  @media (min-width: $phablet) {


    .table__title,
    .table__content {
      display: inline-block;
      width: 50%;
      vertical-align: top;
    }
  }

  @media (min-width: $table-stack-breakpoint) {
    // We removed the semantics on mobile. In this media query, we are setting the semantics to their original value.
    // See: http://adrianroselli.com/2017/11/a-responsive-accessible-table.html
    display: table;

    .align-right {
      text-align: right;
    }

    thead th,
    tfoot th,
    tfoot .table__empty-cell {
      display: table-cell;

      &.width-30 {
        width: 30%;
      }
    }

    td {
      // We removed the semantics on mobile. In this media query, we are setting the semantics to their original value.
      // See: http://adrianroselli.com/2017/11/a-responsive-accessible-table.html
      display: table-cell;
    }

    tr {
      display: table-row;
      /* We removed the semantics on mobile. In this media query, we are setting the
        semantics to their original value.

        See: http://adrianroselli.com/2017/11/a-responsive-accessible-table.html */
    }

    td {
      width: auto;
      display: table-cell;
      float: none;
    }

    .table__title {
      display: none;
    }

    .table__content {
      width: 100%;
    }
  }

}

.table--loading {

  .table__content {
    height: 24px;
    border-radius: 4px;
    width: 150px;
    background: linear-gradient(-90deg, $grey-light 0%, $white-dark 50%, $grey-light 100%);
    background-size: 400% 400%;
    animation: pulse 1.2s ease-in-out infinite;

  }
  @keyframes pulse {
    0% {
      background-position: 0% 0%
    }
    100% {
      background-position: -135% 0%
    }
  }
}