.pagination {  
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-color: gainsboro !default;
  $base-border-radius: 3px !default;
  $base-spacing: 1.5em !default;
  $base-accent-color: #477DCA !default;
  $base-link-color: $base-accent-color !default;
  $dark-gray: #333 !default;
  $large-screen: em(860) !default;
  $base-font-color: $dark-gray !default;
  
  ul {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }

  a {
    text-decoration: none;
  }
  //////////////////////////////////////////////////////////////////////////////////

  $pagination-border-color: $base-border-color;
  $pagination-border: 1px solid $pagination-border-color;
  $pagination-background: lighten($pagination-border-color, 10);
  $pagination-hover-background: lighten($pagination-background, 5);
  $pagination-color: $base-font-color;

  text-align: center;

  ul {
    display: inline;
    text-align: center;

    li {
      display: inline;
    }

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

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

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

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

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