_pagination.scss

.pagination {
  $base-border-color: $secondary !default;
  $base-border-radius: 3px !default;
  $base-spacing: 1.5em !default;
  $action-color: $accent !default;
  $dark-gray: #333 !default;
  $large-screen: 53.75em !default;
  $base-font-color: $dark-gray !default;
  $pagination-border-color: $secondary;
  $pagination-border: 1px solid $pagination-border-color;
  $pagination-background: $background;
  $pagination-hover-background: lighten($pagination-background, 5);
  $pagination-color: $base-font-color;

  text-align: center;
  margin-bottom: 20px;

  ul {
    display: inline;
    margin: 0;
    padding: 0;
    text-align: center;

    li {
      display: inline;
      list-style: none;
    }

    ul li {
      display: none;

      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3) {
        display: inline;
      }

      @include media($large-screen) {
        display: inline;
      }
    }

    li a, li em {
      background: $pagination-background;
      border-radius: $base-border-radius;
      border: $pagination-border;
      color: $pagination-color;
      outline: none;
      padding: ($base-spacing / 4) ($gutter / 2);
      text-decoration: none;
      transition: all 0.2s ease-in-out;

      &:hover,
      &:focus {
        background: $pagination-hover-background;
        color: $action-color;
      }

      &:active {
        background: $pagination-background;
      }
    }
  }
}