.pagination {
  // add spacing and border if pagination is in content block
  .block__content & {
    margin-top: $spacing--m;
    padding-top: $spacing--m;

    @include viewport--l {
      margin-top: $spacing--l;
      padding-top: $spacing--l;
    }
  }
  // list
  &__list {
    @include font-style($pagination-list-font-style);
    display: flex;
    margin-left: -10px; // compensate link/text spacing & align with grid
  }
  // link
  &__item {
    > a,
    > span {
      display: block;
      min-width: 30px;
      padding: 0 10px;
      text-align: center;
    }
  }
  // control
  &__control .icon {
    top: $baseline * 0.3;
  }
}

// viewport s
@include viewport--s('inversed') {
  // if list has modifier '--s' it is containing numbers with at least 3 digits
  // in this case hide the second item in the list for the smallest viewport
  .pagination__list--s .pagination__item:nth-child(2) {
    display: none;
  }
}

// viewport s - m
@include viewport--l('inversed') {
  // pagination s
  .pagination__list--s {
    @include font-style('body--l');
    margin-left: -5px; // compensate link/text spacing & align with grid
    // item
    .pagination__item {
      > a,
      > span {
        padding: 0 5px;
      }
    }
    // control
    &__control .icon {
      top: $baseline * 0.4;
    }
  }
}

// background mappings
@include pagination-background-mapping;