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

  &__item {
    @extend .divider;
    position: relative;
  }

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

// small
.link-list--s {

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

// extra small
.link-list--xs {

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

// specific background mappings
// background color mappings
.bg-brand--blue,
.bg-brand--dark-blue,
.bg-brand--red,
.bg-brand--turquoise {
  .link-list__link {
    color: $color-brand--four;
  }
}
.bg-brand--off-white .link-list__link {
  color: $color-brand--one;
}

.bg-brand--yellow .link-list__link {
  color: $color-brand--two;
}

.bg-brand--gradient-orange,
.bg-brand--dark-grey {
  .link-list__link {
    color: $color-brand--white;
  }
}

@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;
    }
  }
}
