@mixin tableCollapse {
  position: relative;

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

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

  td {
    border-bottom: 1px solid $vl-border-color;
    position: relative;
    padding-left: 40%;
    white-space: normal;
    text-align:left;
  }

  td::before,
  th::before {
    content: attr(data-title);
    position: absolute;
    top: 10px;
    left: 10px;
    width: 35%;
    padding-right: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align:left;
    font-weight: 500;
  }
}

.vl-data-table {
  &--collapsed-xs {
    @include respond-to(xsmall) {
      @include tableCollapse;
    }
  }
  &--collapsed-s {
    @include respond-to(small) {
      @include tableCollapse;
    }
  }
  &--collapsed-m {
    @include respond-to(medium) {
      @include tableCollapse;
    }
  }
}