@mixin make-ie9-block($display) {
  @extend .clearfix;

  display: block;
  float: left;
  clear: left;

  box-sizing: border-box;
  width: 100%;

  @include media-breakpoint-up(md) {
    display: $display;
    float: none;
    clear: none;

    &::after {
      display: none;
    }
  }
}

.table--clickable {

  .table__row:hover {
    background: $color-gray--mid;
    cursor: pointer;
  }

  .table__row__item__content__link:hover {
    color: $color-light-blue;
    cursor: pointer;
  }

}

.table {
  @extend .clearfix;

  display: block;
  width: 100%;

  @include media-breakpoint-up(md) {
    display: table;
  }

}

.table__header {
  display: none;

  @include media-breakpoint-up(md) {
    display: table-row;
  }
}

.table__header__item {
  display: table-cell;

  padding: 7px 10px;

  font-weight: bold;
  text-align: left;
}

.table__content {
  @include make-ie9-block(table-row-group);

  @include media-breakpoint-up(md) {
    border: 1px solid $color-gray--light;
  }
}

.table__row {
  @include make-ie9-block(table-row);

  padding: 15px 20px 5px;
  border-top: 1px solid $color-gray--mid;

  text-align: left;

  background: white;

  &:nth-of-type(2n) {
    background: $color-gray--lighter;
  }

  &:last-of-type {
    border-bottom: 1px solid $color-gray--mid;

    .table__row__item {
      @include media-breakpoint-up(md) {
        border-bottom: 1px solid $color-gray--mid;
      }
    }
  }

  @include media-breakpoint-up(md) {
    padding: 15px 20px;
    border: none;
  }
}

.table__row__item {
  display: inline-block;
  padding: 0 0 10px 0;

  @include media-breakpoint-up(md) {
    vertical-align: middle;
  }

  &:last-of-type {
    .table__row__item__content::after {
      content: '';
    }

    @include media-breakpoint-up(md) {
      border-right: 1px solid $color-gray--mid;
    }
  }

  &:first-of-type {
    @include media-breakpoint-up(md) {
      border-left: 1px solid $color-gray--mid;
    }
  }

  @include media-breakpoint-up(md) {
    display: table-cell !important;
    padding: 12px 10px;
    border-top: 1px solid $color-gray--mid;
  }

}

.table__row__item--multirow {
  border-right: 1px solid $color-gray--mid;
}

.table__row__item__content {
  display: inline-block;
  font-size: 14px;

  &::after {
    content: ',\00a0';

    @include media-breakpoint-up(md) {
      content: '' !important;
      display: none;
    }
  }

  &__label {
    display: inline-block;

    @include media-breakpoint-up(md) {
      display: none;
    }
  }
}

.table__row__item__content__link {
  font-weight: bold;
  color: $color-light-blue;

  &:hover {
    cursor: pointer;
  }
}

.table__row__item--headline {
  @include make-ie9-block(table-cell);
  @include media-breakpoint-up(md) {
    width: auto;
  }

  .table__row__item__content::after {
    content: '';
  }

  .table__row__item__content {
    font-size: 15px;

    @include media-breakpoint-up(md) {
      font-size: 14px;
    }
  }
}

// Copyright AXA Versicherungen AG 2015