// Pagination (very similar to Pager)
$pagination-color: desaturate(lighten($base, 57.5%), 17%)

.pagination
  ul
    background: $pagination-color
    +border-radius(6px)
    +box-shadow(none)

    > li
      &:first-child
        +border-radius(6px 0 0 6px)

      &:last-child
        +border-radius(0 6px 6px 0)

      &.previous,
      &.next
        > a, > span
          background: transparent
          border: none
          border-right: 2px solid $inverse !important
          margin: 0 9px 0 0
          padding: 11px 17px 12px 17px
          +border-radius(6px 0 0 6px)
          +box-shadow(none !important)

      &.next
        > a, > span
          border-left: 2px solid $inverse !important
          margin-left: 9px
          margin-right: 0
          +border-radius(0 6px 6px 0)

      &.active
        > a, > span
          background-color: $inverse
          border-color: $inverse
          border-width: 2px
          color: $pagination-color
          margin: 10px 5px 9px

          &:hover, &:focus
            background-color: $inverse
            border-color: $inverse
            color: $pagination-color
            +box-shadow(none)

      > a, > span
        background: $inverse
        border: 5px solid $pagination-color
        border-radius: 50px
        color: $inverse
        line-height: 16px
        margin: 7px 2px 6px
        padding: 0 4px
        +transition((background .2s ease-out, border-color 0s ease-out, color .2s ease-out))

        &:hover, :focus
          background-color: $firm
          border-color: $firm
          color: $inverse
          +transition((background .2s ease-out, border-color .2s ease-out, color .2s ease-out))

        &:active
          background-color: scale-color($firm, $lightness: -15%)
          border-color: scale-color($firm, $lightness: -15%)

    img
      // For retina 2x image that is scaled down to 14px for all common screens
      height: 14px
      margin-top: -1px
      vertical-align: middle
      width: 13px