// Pagination
//
// Provide pagination links with the multi-page pagination component.
// On mobile we only show the pagination items "previous", "next" and "active".
//
// Links are customizable for different circumstances. Use `.disabled` for unclickable
// links and `.active` to indicate the current page.
//
// markup: pagination.twig
//
// Weight: 3
//
// Style guide: molecules.navigation.pagination


@import "settings";

.pagination {
  display: inline-block;
  padding-left: 0;
  margin: $line-height-computed 0;

  > li {
    display: none;

    @include for-tablet-portrait-up {
      display: inline-block;
    }

    > a,
    > span {
      position: relative;
      float: left; // Collapse white-space
      padding: $padding-base-vertical $padding-base-horizontal;
      text-decoration: none;
      min-width: 44px;
      text-align: center;
      min-height: 32px;
      line-height: 32px;
    }

  }

  > li > a,
  > li > span {
    &:hover,
    &:focus {
      z-index: 2;
    }
  }

  > .active > a,
  > .active > span {
    &,
    &:hover,
    &:focus {
      z-index: 3;
      cursor: default;
    }
  }

  > .disabled {
    > span,
    > span:hover,
    > span:focus,
    > a,
    > a:hover,
    > a:focus {
      cursor: $cursor-disabled;
    }
  }
}

.pagination {

  .pager__item--previous,
  .pager__item--next {
    display: inline-block;

    a {
      background: white;
    }
  }

  .pager__item.active {
    display: inline-block;
  }

}

.mini-pager {
  position: relative;
  padding-top: 35px;
  list-style: none;
  padding-left: 0;
  text-align: center;
}
