.pagination {
  display:block;
  width:100%;
  text-align:center;
  list-style:none;
  margin:0;
  padding:0;
  font-size:0;

  li {
    display:inline-block;
    font-size:0;
    margin:0 3px;

    a,
    span {
      display:block;
      font-size:15px;
      color:#979797;
      padding:5px 10px;
      background-color:#f4f8f9;
      border-radius:2px;
      border:1px solid #979797;
    }

    &.active {
      a, span {
        background-color:$brand-primary;
        color:#fff;
        border-color:$brand-primary;
      }
    }

    &.disabled {
      a,span {
        cursor:not-allowed;
        opacity:0.4;
      }
    }

    &:hover:not(.disabled) {
      a {
        background-color:#fff;
      }
    }
  }
}