#pagination
  .pagination
    margin-top: 20px
    text-align: center

  .page-number
    &.current
      background: $theme-paginator-color
      color: var(--white)

  .pagination-info
    position: absolute
    top: 50%
    padding: 20px 40px
    width: 100%
    transform: translate(0, -50%)

  .prev_info,
  .next_info
    @extend .limit-one-line
    color: var(--white)
    font-weight: 500

  .next-post
    .pagination-info
      text-align: right

  .pull-full
    width: 100% !important

  .prev-post .label,
  .next-post .label
    color: var(--light-grey)
    text-transform: uppercase
    font-size: 90%

  .prev-post,
  .next-post
    @extend .postImgHover
    width: 50%

    +maxWidth768()
      width: 100%

    a
      position: relative
      display: block
      overflow: hidden
      height: 150px

  &.pagination-post
    overflow: hidden
    margin-top: 40px
    width: 100%
    background: $dark-black

.layout
  & > .recent-posts
    .pagination
      & > *
        display: inline-block
        margin: 0 6px
        width: w = 2.5em
        height: w
        line-height: w

      & > *:not(.space)
        @extend .cardHover

        &:hover
          background: var(--btn-hover-color)
          color: var(--btn-color)

  & > div:not(.recent-posts)
    .pagination
      .page-number
        display: inline-block
        margin: 0 4px
        min-width: w = 24px
        height: w
        text-align: center
        line-height: w
        cursor: pointer