ul.pagination {
  display: inline-block;
  min-height: 1.3rem;
  li {
    line-height: 1.3rem;
    font-size: 0.875rem;
    margin-left: 0.125rem;
    float: left;
    display: block;
    &.unavailable a:hover { background-color: transparent; }
    &.current a, &.current a:hover { color: $button-text-color; }
    &.arrow { font-family: 'Zapf Dingbats'; }
    a {
      @include transition(background-color 300ms ease-out);
      display: block;
      padding: 0.0325rem 0.325rem 0.0325rem;
      color: $secondary-font-color;
      background: none;
      border-radius: 3px;
      font-weight: normal;
      font-size: 1rem;
      line-height: inherit;
      &:hover { color: $secondary-font-color-dark; background-color: $secondary-font-color-light; }
    }
  }
  li.unavailable a { cursor: default; color: $secondary-font-color; }
  li.current a {
    background: $color-primary;
    &:hover, &:focus { background: $color-primary-alt; }
  }
  li.jump {
    @include transition(background-color 300ms ease-out);
    display: block;
    padding: 0.0325rem 0.325rem 0.0325rem;
    color: $secondary-font-color;
    background: none;
    border-radius: 3px;
    font-weight: normal;
    font-size: 0.8rem;
    line-height: inherit;
    cursor: pointer;
    position: relative;
    .jump-tooltip {
      text-align: center;
      color: $secondary-font-color;
      background: $secondary-font-color-light;
      background-clip: padding-box;
      border-radius: 3px;
      position: absolute;
      width: 7rem;
      left: 50%;
      margin-left: -3.5rem;
      top: -3.5rem;
      padding: 0.5rem;
      z-index: 100;

      &:before, &:after {
        content: "";
        position: absolute;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        top: 100%;
        left: 50%;
        margin-left: -10px;
      }

      &:after{
        border-top: 10px solid $secondary-font-color-light;
        z-index: 1;
      }

      .jump-to-page {
        width: 100%;
        input {
          float: left;
          display: block;
          margin-bottom: 0;
          width: 60%;
          height: 2rem;
        }
        button {
          float: left;
          display: block;
          padding: 0;
          width: 40%;
          height: 2rem;
        }
      }
    }
  }
  @include media($mobile) { margin-top: 1rem; }
}

.pagination-simple {
  float: right;
  margin-bottom: 1rem;
  span { color: $secondary-font-color; }
}
.pagination-slide {
  @include clearfix;
  height: 2.1875rem;
  margin-bottom: 1rem;
  .prev, .next {
    @include span-columns(3);
    button { display: inline-block; padding: 0.5rem; margin: 0; }
  }
  .next { @include omega; button { float: right; } }
  .page { @include span-columns(6); color: $secondary-font-color; text-align: center; line-height: 2.1875rem; }
}

.pagination-wrap {
  @include span-columns(12);
  @include omega;
  pagination { float: right; }

  @include media($mobile) {
    @include span-columns(8); @include omega;
    &, pagination { float: none; text-align: center; }
  }
}
