$main-color: #f0f0f0;
$secondary-color: #1d1f20;

@mixin display-child($n) {
  @for $i from 2 through $n {
    &:nth-child(#{$i}) {
      a {
        display: inline-block;
      }
    }
  }
}

*,
*::after,
*::before {
  box-sizing: border-box;
}
html,
body {
  min-height: 100vh;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination2-container {
  background: lighten($main-color, 5%);
  padding: 1rem;
  margin: 3rem auto;
  border-radius: 0.2rem;
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.3);
  counter-reset: pagination2;
  text-align: center;
  &:after {
    clear: both;
    content: "";
    display: table;
  }
  ul {
    width: 100%;
  }
}

.xlarge {
  width: 65rem;
}

.large {
  width: 45rem;
}

.middle {
  width: 32rem;
}

.small {
  width: 22rem;
}

.xsmall {
  width: 14rem;
}

ul, li {
  list-style: none;
  display: inline;
  padding-left: 0px;
}

li {
  counter-increment: pagination2;
  &:hover {
    a {
      color: lighten($main-color, 5%);
      background-color: $secondary-color;
      border: solid 1px $secondary-color;
    }
  }
  &.active {
    a {
      color: lighten($main-color, 5%);
      background-color: $secondary-color;
      border: solid 1px $secondary-color;
    }
  }
  &:first-child {
    float: left;
    a {
      &:after {
        content: "Previous";
      }
    }
  }
  &:nth-child(2) {
    counter-reset: pagination2;
  }
  &:last-child {
    float: right;
    a {
      &:after {
        content: "Next";
      }
    }
  }
  a {
    border: solid 1px darken($main-color, 10%);
    border-radius: 0.2rem;
    color: darken($main-color, 45%);
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    padding: 0.5rem 0.9rem;
  }
  a:after {
    content: " " counter(pagination2) " ";
  }
}

.large {
  li {
    a {
      display: none;
    }
    &:first-child {
      a {
        display: inline-block;
      }
      a:after {
        content: "Previous";
      }
    }
    @include display-child(8);
    &:last-child {
      a {
        display: inline-block;
      }
      a:after {
        content: "Next";
      }
    }
    &:nth-last-child(2) {
      a {
        display: inline-block;
      }
    }
    &:nth-last-child(3) {
      display: inline-block;
      &:after {
        padding: 0 1rem;
        content: "...";
      }
    }
  }
}

.middle {
  li {
    a {
      display: none;
    }
    &:first-child {
      a {
        display: inline-block;
      }
      a:after {
        content: "<";
      }
    }
    &:last-child {
      a {
        display: inline-block;
      }
      a:after {
        content: ">";
      }
    }
    @include display-child(5);
    &:nth-last-child(2) {
      a {
        display: inline-block;
      }
    }
    &:nth-last-child(3) {
      display: inline-block;
      &:after {
        padding: 0 1rem;
        content: "...";
      }
    }
  }
}

.small {
  li {
    display: none;
    &:first-child {
      width: 50%;
      display: inline;
      a:after {
        content: "Previous Page";
      }
    }
    &:last-child {
      display: inline;
      a:after {
        content: "Next Page";
      }
    }
  }
}

.xsmall {
  li {
    display: none;
    &.active {
      display: inline;
    }
    &:first-child {
      display: inline;
      a:after {
        content: "Prev";
      }
    }
    &:last-child {
      display: inline;
      a:after {
        content: "Next";
      }
    }
  }
}