<div class="pagination-wrapper">
  <div class="pagination">
    <a class="prev page-numbers" href="javascript:;">prev</a>
    <span aria-current="page" class="page-numbers current">1</span>
    <a class="page-numbers" href="javascript:;">2</a>
    <a class="page-numbers" href="javascript:;">3</a>
    <a class="page-numbers" href="javascript:;">4</a>
    <a class="page-numbers" href="javascript:;">5</a>
    <a class="page-numbers" href="javascript:;">6</a>
    <a class="page-numbers" href="javascript:;">7</a>
    <a class="page-numbers" href="javascript:;">8</a>
    <a class="page-numbers" href="javascript:;">9</a>
    <a class="page-numbers" href="javascript:;">10</a>
    <a class="next page-numbers" href="javascript:;">next</a>
  </div>
</div>

//----------  responsive breakpoints
//------------------------------------------------------------------------------
@mixin breakpoint ($value) {
  @if $value == 'phone' {
    @media only screen and (min-width: 120px) and (max-width: 767px) { @content; }
  } @else if $value == 'tablet' {
    @media only screen and (min-width: 768px) and (max-width: 1024px) { @content; }
  } @else if $value == 'touch' {
    @media only screen and (min-width: 120px) and (max-width: 1024px) { @content; }
  } @else if $value == 'desktop' {
    @media only screen and (min-width: 1025px) { @content; }
  } @else {
    @media only screen and (max-width: $value) { @content; }
  }
}

// Colors
$white: #fff;
$black: #000;
$grey: #595959;
$grey-dark: #2b2b2b;
$grey-light: #eee;
$green: #86c023;
$blue: #017ac7;

// Transition
$duration: 400ms;
$easing: ease;

//----------  reset
//------------------------------------------------------------------------------
htm,
body {
  font-family: sans-serif;
}

a {
  text-decoration: none;
}

//----------  pagination
//------------------------------------------------------------------------------
.pagination-wrapper {
  text-align: center;
  margin: 40px 0;
}

.pagination {
  display: inline-block;
  height: 70px;
  margin-top: 70px;
  padding: 0 25px;
  border-radius: 35px;
  background-color: $grey-light;

  @include breakpoint(1199px) {
    height: 50px;
    margin-top: 50px;
    padding: 0 10px;
    border-radius: 25px;
  }
}

.page-numbers {
  display: block;
  padding: 0 25px;
  float: left;
  transition: $duration $easing;
  color: $grey;
  font-size: 20px;
  letter-spacing: 0.1em;
  line-height: 70px;

  &:hover,
  &.current {
    background-color: $green;
    color: $white;
  }

  &.prev:hover,
  &.next:hover {
    background-color: transparent;
    color: $green;
  }

  @include breakpoint(1199px) {
    padding: 0 15px;
    font-size: 16px;
    line-height: 50px;
  }

  @include breakpoint(touch) {
    padding: 0 14px;
    display: none;

    &:nth-of-type(2) {
      position: relative;
      padding-right: 50px;

      &::after {
        content: '...';
        position: absolute;
        font-size: 25px;
        top: 0;
        left: 45px;
      }
    }

    &:nth-child(-n+3),
    &:nth-last-child(-n+3) {
      display: block;
    }

    &:nth-last-child(-n+4) {
      padding-right: 14px;

      &::after {
        content: none;
      }
    }
  }
}