.link-list {
  margin-top: -($baseline * 1.3);

  &__item {
    border-bottom: 1px solid $color--grey;
    position: relative;
  }

  &__link {
    @include font-style(
      $link-list-link-font-style,
      $link-list-link-font-style--l
    );
    display: block;
    padding: ($baseline * 1.2) 0 ($baseline * 1.7);
  }

  // background mappings
  @include link-list-background-mapping;
}

// small
.link-list--s {
  .link-list__link {
    @include font-style(
      $link-list-s-link-font-style,
      $link-list-s-link-font-style
    );
  }
}

// extra small
.link-list--xs {
  .link-list__link {
    @include font-style('body--m', 'body--m');
    padding: ($baseline * 1.8) 0 ($baseline * 2);
  }
}

@include viewport--l {
  .link-list {
    margin-top: -($baseline * 2.1);

    &--s {
      margin-top: 0;

      .block__title + & {
        margin-top: $spacing--xs;
      }

      .link-list__link {
        padding-bottom: $spacing--s;
      }
    }

    &:not(.link-list--single) {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      // make sure flex items are always aligned properly in last row
      &::after {
        content: '';
        display: block;
        width: grid-columns(3, 9);
      }
    }

    // one column layout
    &--single {
      .link-list__item {
        width: 100%;
      }
    }

    // two column layout
    &--double {
      width: grid-columns(8, 9);

      .link-list__item {
        width: grid-columns(4, 8);
      }
    }

    // defaults to 3 column layout
    &__item {
      width: grid-columns(3, 9);
    }

    &__link {
      padding: 21px 0 28px;
    }
  }
}