//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .pages .pages-items {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        padding: 0;
    }
    // all pages except the current page
    .pages a.page {
        position: relative;
        // the underline under the numbers
        &::after {
            background-color: @pager-action__color;
            bottom: 2px;
            content: "";
            height: 1px;
            left: 0;
            margin: auto;
            position: absolute;
            right: 0;
            width: 10px;
        }
    }
    .pages-item-next {
        position: static;
    }
    // the next icon
    .pages .action.next {
        box-shadow: none;
        margin: 0;
        &::after {
            font-size: @pager__font-size;
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .pages .action.next {
        padding: 0;
        &:visited,
        &:hover,
        &:active {
            background: transparent;
            color: @pager-action__color;
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .pages .action {
        &.previous:visited,
        &.next:visited,
        &.previous,
        &.next {
            .lib-button();
            background: transparent;
            border-radius: 30px;
            box-shadow: none;
            color: @djo-gray;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            position: relative;
            padding: 14px 30px 14px 18px;
            &:hover,
            &:active {
                background: @djo-gray;
                color: @color-white;
                &::after,
                &.previous {
                    color: @color-white !important;
                }
            }
            // The arrow icon
            &::after {
                position: absolute;
                top: 0;
                right: 10px;
                color: @djo-gray !important;
                content: \002771;
                line-height: 29px;
                .lib-font-size(13) !important;
                font-weight: bold;
            }
            // "Next Page"
            span:not(.label) {
                .lib-visually-hidden-reset();
            }
        }
        &.previous:visited,
        &.previous {
            padding: 14px 18px 14px 30px;
            // The arrow icon
            &::after {
                position: absolute;
                left: 10px;
                content: \002770;
                width: 10px;
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .pages .action {
        &.previous,
        &.next {
            ._lib-button-icon();
        }
    }
}