@creativecommons/vocabulary/scss/table.scss

$table-cell-padding: $space-normal;
$table-color: $color-dark-slate-gray;
$table-head-background-color: $color-light-gray;
$table-striped-row-even-background-color: $color-lighter-gray;
$table-cell-border: 1px solid $color-light-gray;

@import "bulma/sass/elements/table.sass";

.number-cell {
  text-align: right !important;
}

.table {
  @extend .body-normal;

  line-height: 1.5;
}

.is-responsive {
  @media only screen and (max-width: 760px),(min-device-width: $tablet) and (max-device-width: $desktop)  {
    table, thead, tbody, th, td, tr {
      display: block;
    }

    thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

    tr {
      margin-top: $space-normal;
    }

    td {
      position: relative;
      text-align: left !important;
      padding-left: calc(45% + 1rem);
      background-color: $color-white;
    }

    td:nth-child(2n) {
      background-color: $color-lighter-gray;
    }

    td:first-child {
      border-top-left-radius: $space-smaller;
      border-top-right-radius: $space-smaller;
    }

    td:last-child {
      border-bottom-left-radius: $space-smaller;
      border-bottom-right-radius: $space-smaller;
    }

    td:before {
      position: absolute;
      top: 0;
      left: 0;
      font-size: $font-size-body-normal;
      font-weight: bold;
      line-height: 1.5;
      height: 100%;
      width: 45%;
      padding: $space-normal;
      background-color: $color-light-gray;
      border-right: 0.0625rem solid $color-light-gray;
    }

    td:nth-of-type(n):before { content: attr(data-label);}
  }
}