.extensive-link-list {
  @include font-style('body--m');

  &__list-title {
    @include font-style('title--xs', 'body--l');
    display: block;
    padding: ($baseline * 1.5) 50px $spacing--s 0;
  }

  .collapsible__button {
    &::after,
    &::before {
      background: $color-brand--one;
    }
  }

  .collapsible__content li + li {
    margin-top: $spacing--xs;
  }

  .toggle-arrow.icon {
    right: 0;
    top: 22px;
    transition: all 0.2s ease-in-out;
  }

  .collapsible__trigger--expanded + .collapsible__content {
    margin-bottom: $spacing--m;
  }
}

// viewport l
@include viewport--l {
  .extensive-link-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-top: -$spacing--l;
    // make sure flex items are always aligned properly in last row
    &::after {
      content: '';
      display: block;
      width: grid-columns(3, 12);
    }

    &__list-title {
      margin-bottom: $spacing--xs;
      padding: 0;
    }

    &__item {
      border-bottom: 0;
      margin-top: $spacing--l;
      width: grid-columns(3, 12);
    }

    .collapsible__button {
      display: none;
    }

    .collapsible__content {
      max-height: 100% !important; // overwrite possible in-line max-height set by JS on small viewport
      overflow: visible;
      transition: none;
    }

    .collapsible__trigger {
      pointer-events: none;
    }

    .collapsible__trigger--expanded + .collapsible__content {
      margin-bottom: 0;
    }
    @include link-list-background-mapping;
  }
}