// Pagers
//
// Colette comes with basic styles for paginations.
//
// The default Pager is showing no list. It's a counter that's giving you the number of the page you're on, versus the total number of pages.
//
// Markup: pager.twig
//
// Styleguide: Elements.Pager

// Pager with a list
//
// This is the list version of the Pager.
//
// Markup: pager-withlist.twig
//
// Styleguide: Elements.Pager.PagerWithlist
.pager
    color var(--color-primary)
    font-family $fontstack-secondary
    display flex
    align-items center
    justify-content center

    &:disabled
    &[aria-disabled]
        display none

    &-current
    &-max
        color var(--color-base)

    &-next
    &-prev
        background transparent
        color var(--color-base)
        line-height 1em
        position relative

        &:disabled
        &[aria-hidden] // disabled link is a span[aria-hidden]
            color var(--color-secondary)

        svg
            width 1.4em
            height @width

        // this after pseudo element extend clickable area
        // when the button is too much small
        &:after
            content ''
            position absolute
            top 50%
            left 50%
            transform translate(-50%, -50%)
            width 32px
            height @width
            min-width 100%
            min-height 100%

    &-prev
        margin-right .2em

    &-next
        margin-left .2em

    &-count
        margin 0 .5em

    &-list
        margin 0
        padding 0
        cursor default

        a
        strong // current page is strong
            color var(--color-base)

        > li
            display inline-block
            margin 0 .5em

    &-withlist
        _ml(1)
        _mr(1)

        .pager-next
            order 1000 // excessive value to stay the last