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

.pagination {

overflow: hidden; // clearfix
text-align: center;

}

// Pagination items can be `span`s or `a`s .pagination-item {

display: block;
padding: 1rem;
border: solid #eee;
border-width: 1px 0;
color: $dark-2;

&:first-child {
  margin-bottom: -1px;
}

}

span.pagination-item{

color: $dark-1;

} // Only provide a hover state for linked pagination items a.pagination-item:hover {

background-color: #f5f5f5;
border-bottom: 0;

}

@media (min-width: 30em) {

.pagination {
  margin: 3rem 0;
}

.pagination-item {
  float: left;
  width: 50%;
  border-width: 1px;

  &:first-child {
    margin-bottom: 0;
    border-top-left-radius:    4px;
    border-bottom-left-radius: 4px;
  }
  &:last-child {
    margin-left: -1px;
    border-top-right-radius:    4px;
    border-bottom-right-radius: 4px;
  }
}

}