// 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
  margin: $section-spacing 0;
  color: $gray-3;
  text-align: center;
  display: flex;
  width: 100%;

  > * {
    display: block;
    padding: $padding-v $padding-h;
    border: solid $border-color;
    border-width: 1px;
    flex-grow: 1;
    margin-left: -1px;

    &:first-child {
      margin-left: 0;
      border-top-left-radius:    $border-radius;
      border-bottom-left-radius: $border-radius;
    }

    &:last-child {
      border-top-right-radius:    $border-radius;
      border-bottom-right-radius: $border-radius;
    }
  }
}

/*
  Pagination items can be `span`s or `a`s but
  only provide a hover state for linked pagination items
*/
a.pagination-item:hover {
  background-color: $border-color;
}