// Pagination
//-------------------------------
// Super lightweight (HTML-wise) blog pagination. `span`s are provided for when there are no more previous or next posts to show.


.pagination {
  overflow: hidden;
  max-width: 30%;
  margin: 0 auto 4rem auto;
  color: var(--text-color-light);

  > ul {
    overflow: hidden;
    list-style: none;
    max-height: 3rem;
    padding: 0;
    margin: 2rem 0;
  }
  hr {
    max-width: 100%;
    margin-bottom: 0;
  }
}

// Pagination items can be `span`s or `a`s
.pagination-item {
      display: inline-block;
      width: auto;

    &-prev {
      margin-bottom: 0;
      float: left;
      a {
        color: var(--link-color);
        @include border-slide(right);
      }
    }
    &-next {
      margin-left: -1px;
      text-align: right;
      float: right;
      a {
        color: var(--link-color);
        @include border-slide(left);
      }
    }
}