#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
    position: relative
    display: block
    overflow: hidden
    width: 50%
    height: 150px

    +maxWidth768()
      width: 100%

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

.layout
  .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)

#archive
  .pagination
    margin-top: 30px

    & > *:not(.space)
      box-shadow: none