pagination.sass

.pagination
    // font-family: $font-family-sans-serif
    font-size: px2rem(14)
    justify-content: center
    margin: calc($grid-gutter * 2.5) 0 0
    li
        @include list-reset
        // @extend .page-item
    a
        // @extend .page-link

    .disabled
        a::before
            opacity: .3

    &:not(&-between-pages)
        li
            &:first-child,
            &:nth-child(2),
            &:nth-last-child(2),
            &:last-child
                a
                    // @extend .icon
            &:first-child
                a
                    @include icon(arrow-first)
            &:nth-child(2)
                a
                    @include icon(arrow-left)
            &:nth-last-child(2)
                a
                    @include icon(arrow-right)
            &:last-child
                a
                    @include icon(arrow-last)
            a::before
                font-size: px2rem(12)

    &-between-pages
        @include list-reset
        display: flex
        justify-content: space-between
        margin-top: $spacing3
        li
            flex: 1
            position: relative
            border-top: 1px solid #adb5bd
            @include media-breakpoint-up(md)
                border: 0
                padding: calc(#{$spacing0}/2) $spacing0
        a
            background-color: transparent
            border: 0
            text-decoration: none
            &:hover
                background-color: transparent
                text-decoration: underline
                span
                    text-decoration: none
            @include media-breakpoint-down(md)
                display: block
                padding: px2rem(20) px2rem(40) px2rem(20) 0
                &::before 
                    opacity: .5
                    position: absolute
                    right: 0
                    text-transform: none
                    top: 50%
                    transform: translateY(-50%)
                    vertical-align: middle
                                    

        span
            // color: $gray-600
            &::before, &::after
                font-size: px2rem(12)

        .previous
            padding-left: 0
            span
                @include icon(arrow-left, before)
                &::before
                    margin-right: px2rem(5)
        .next
            padding-right: 0
            text-align: right
            span
                @include icon(arrow-right, after)
                &::after
                    margin-left: px2rem(5)

        @include media-breakpoint-down(md)
            flex-direction: column-reverse
            margin-left: 0
            margin-right: 0
            li.previous,
            li.next
                // border-top: 1px solid $gray-500
                text-align: left
                a
                    padding: px2rem(20) px2rem(40) px2rem(20) 0
                    &::after
                        @include icon
                        font-size: px2rem(12)
                        opacity: 0.5
                        position: absolute
                        right: 0
                        top: 50%
                        transform: translateY(-50%)
                span
                    &::after,
                    &::before
                        content: none

            li.previous
                border-bottom: 1px solid $main-border-color
                a
                    @include icon(arrow-left)
            li.next
                a
                    @include icon(arrow-right)

.posts
    + nav
        .pagination
            align-items: center
            display: flex
            margin-left: auto
            margin-right: auto
            margin-top: 0
            li
                a
                    line-height: 140%
                    padding: calc(#{$spacing0}/2) $spacing0
                    text-decoration: none
                    transition: background-color .15s ease-in-out
                &.disabled
                    pointer-events: none
                &:not(.disabled)
                    a:hover
                        background-color: #e9ecef