@import "variables";

.pagination {
  margin: 1em 0;
  padding: 1em;
  text-align: center;

  a, .current, .next_page, .previous_page {
    background: transparent;
    border-radius: $round;
    border: 1px solid $gray-light;
    color: $gray;
    display: inline-block;
    font-size: 1em;
    margin: 0.5%;
    min-height: 2.6em;
    padding: 0.4em 1em;

    &.current, &:hover {
      background: $gray-light;
      color: $white;
      transition: $all;
    }
  }

  .next_page, .previous_page {
    min-width: 9em;
  }
}

@media screen and (max-width: $handheld) {
  .pagination {
    a, .current, .gap {
      margin: 0 1em 1em 0;
    }

    .next_page, .previous_page {
      width: 9em;
      display: block;
      margin: 0 auto 1em auto;
    }
  }
}