Pagination

<!-- Pagination -->
<nav class="text-center">
    <ul class="pagination pagination--vcbs">
        <li class="pagination-prev">
            <a href="#">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </li>
        <li><a href="#">1</a></li>
        <li class="disabled"><a>&hellip;</a></li>
        <li><a href="#">6</a></li>
        <li class="active"><a href="#">7</a></li>
        <li><a href="#">8</a></li>
        <li class="disabled"><a>&hellip;</a></li>
        <li><a href="#">15</a></li>
        <li class="pagination-next">
            <a href="#">
                <span><i class="fa fa-chevron-right"></i></span>
            </a>
        </li>
    </ul>
</nav>
<!-- /Pagination -->

.pagination--vcbs {
  > li {
    > a,
    > span {
      @include typeBody;
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 3.2rem;
      height: 3.2rem;
      border: 1px solid $color-grey-light;
      margin-left: 0.1rem;
      margin-right: 0.1rem;
      color: $color-grey-dark;
    }

    &:first-child,
    &:last-child {
      > a,
      > span {
        margin-left: 0;
      }
    }

    &.pagination-prev,
    &.pagination-next {
      > a,
      > span {
        border-width: 0;
      }
    }
  }

  > .disabled {
    > span,
    > span:hover,
    > span:focus,
    > a,
    > a:hover,
    > a:focus {
      border-width: 0;
      cursor: auto;
    }
  }
}