// /**
//  * Copyright Â© Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Pager
//  _____________________________________________

//
//  When pager items have solid or don't have background
//  ---------------------------------------------

.lib-pager(
    @_pager-label-display: @pager-label__display,
    @_pager-item-display: @pager-item__display,
    @_pager-reset-spaces: @pager-reset-spaces,
    @_pager-font-size: @pager__font-size,
    @_pager-font-weight: @pager__font-weight,
    @_pager-line-height: @pager__line-height,
    @_pager-item-margin: @pager-item__margin,
    @_pager-item-padding: @pager-item__padding,
    @_pager-actions-padding: @pager-actions__padding,

    //  Page current
    @_pager-current-font-weight: @pager-current__font-weight,
    @_pager-current-color: @pager-current__color,
    @_pager-current-background: @pager-current__background,
    @_pager-current-border: @pager-current__border,
    @_pager-current-gradient: @pager-current__gradient,
    @_pager-current-gradient-direction: @pager-current__gradient-direction,
    @_pager-current-gradient-color-start: @pager-current__gradient-color-start,
    @_pager-current-gradient-color-end: @pager-current__gradient-color-end,

    //  Page item - text color
    @_pager-color: @pager__color,
    @_pager-color-visited: @pager__visited__color,
    @_pager-color-hover: @pager__hover__color,
    @_pager-color-active: @pager__active__color,

    //  Page item - background
    @_pager-background: @pager__background,
    @_pager-background-visited: @pager__visited__background,
    @_pager-background-hover: @pager__hover__background,
    @_pager-background-active: @pager__active__background,

    //  Page item - border
    @_pager-border: @pager__border,
    @_pager-border-visited: @pager__visited__border,
    @_pager-border-hover: @pager__hover__border,
    @_pager-border-active: @pager__active__border,

    //  Page item - text decoration
    @_pager-text-decoration: @pager__text-decoration,
    @_pager-text-decoration-hover: @pager__text-decoration,

    //  Page item gradient
    @_pager-gradient: @pager__gradient,
    @_pager-gradient-direction: @pager__gradient-direction,
    @_pager-gradient-color-start: @pager__gradient-color-start,
    @_pager-gradient-color-end: @pager__gradient-color-end,
    @_pager-gradient-color-start-visited: @pager__visited__gradient-color-start,
    @_pager-gradient-color-end-visited: @pager__visited__gradient-color-end,
    @_pager-gradient-color-start-hover: @pager__hover__gradient-color-start,
    @_pager-gradient-color-end-hover: @pager__hover__gradient-color-end,
    @_pager-gradient-color-start-active: @pager__active__gradient-color-start,
    @_pager-gradient-color-end-active: @pager__active__gradient-color-end,

    //  Page action item (previous-next)
    @_pager-action-text-decoration: @pager-action__text-decoration,
    @_pager-action-text-decoration-hover: @pager-action__hover__text-decoration,

    //  Page action item (previous-next) - default
    @_pager-action-color: @pager-action__color,
    @_pager-action-border: @pager-action__border,
    @_pager-action-background: @pager-action__background,
    @_pager-action-gradient-color-start: @pager__gradient-color-start,
    @_pager-action-gradient-color-end: @pager__gradient-color-end,
    @_pager-action-text-decoration: @pager-action__text-decoration,

    //  Page action item (previous-next) - visited
    @_pager-action-color-visited: @pager-action__visited__color,
    @_pager-action-border-visited: @pager-action__visited__border,
    @_pager-action-background-visited: @pager-action__visited__background,
    @_pager-action-gradient-color-start-visited: @pager__visited__gradient-color-start,
    @_pager-action-gradient-color-end-visited: @pager__visited__gradient-color-end,

    //  Page action item (previous-next) - hover
    @_pager-action-color-hover: @pager-action__hover__color,
    @_pager-action-border-hover: @pager-action__hover__border,
    @_pager-action-background-hover: @pager-action__hover__background,
    @_pager-action-gradient-color-start-hover: @pager__hover__gradient-color-start,
    @_pager-action-gradient-color-end-hover: @pager__hover__gradient-color-end,
    @_pager-action-text-decoration-hover: @pager-action__text-decoration,

    //  Page action item (previous-next) - active
    @_pager-action-color-active: @pager-action__active__color,
    @_pager-action-border-active: @pager-action__active__border,
    @_pager-action-background-active: @pager-action__active__background,
    @_pager-action-gradient-color-start-active: @pager__active__gradient-color-start,
    @_pager-action-gradient-color-end-active: @pager__active__gradient-color-end,

    //  Page action item (previous-next) - gradient
    @_pager-action-gradient: @pager__gradient,
    @_pager-action-gradient-direction: @pager__gradient-direction,

    //  Page action icons
    @_pager-icon-use: @pager-icon__use,
    @_pager-icon-previous-content: @pager-icon__previous-content,
    @_pager-icon-next-content: @pager-icon__next-content,
    @_pager-icon-font: @pager-icon__font,
    @_pager-icon-font-size: @pager-icon__font-size,
    @_pager-icon-font-line-height: @pager-icon__font-line-height,
    @_pager-icon-font-margin: @pager-icon__font-margin,
    @_pager-icon-font-vertical-align: @pager-icon__font-vertical-align,
    @_pager-icon-font-position: @pager-icon__position,
    @_pager-icon-font-text-hide: @pager-icon__text-hide
) {
    ._lib-pager-label-display(  // To hide or to display label
        @_pager-label-display: @_pager-label-display,
        @_pager-font-size: @_pager-font-size,
        @_pager-font-weight: @_pager-font-weight,
        @_pager-line-height: @_pager-line-height
    );

    .items {
        ._lib-pager-inline-block-spaces-container(
            @_pager-reset-spaces,
            @_pager-item-display
        );
        .lib-list-reset-styles();
        .lib-css(display, @_pager-item-display);
        .lib-css(font-weight, @_pager-font-weight);
    }

    .item {
        ._lib-pager-inline-block-spaces-item(
            @_pager-reset-spaces,
            @_pager-item-display,
            @_pager-font-size,
            @_pager-line-height
        );
        .lib-css(margin, @_pager-item-margin);
        .lib-css(display, @_pager-item-display);

        .label {
            .lib-visually-hidden();
        }
    }

    a.page {
        .lib-css(background, @_pager-background);
        .lib-background-gradient(
            @_pager-gradient-color-start,
            @_pager-gradient-color-end,
            @_pager-gradient-direction,
            @_pager-gradient
        );
        .lib-css(border, @_pager-border);
        .lib-css(color, @_pager-color);
        .lib-css(display, @_pager-item-display);
        .lib-css(padding, @_pager-item-padding);
        .lib-css(text-decoration, @_pager-text-decoration);

        &:visited {
            .lib-css(background, @_pager-background-visited);
            .lib-background-gradient(
                @_pager-gradient-color-start-visited,
                @_pager-gradient-color-end-visited,
                @_pager-gradient-direction,
                @_pager-gradient
            );
            .lib-css(border, @_pager-border-visited);
            .lib-css(color, @_pager-color-visited);
        }

        &:hover {
            .lib-css(background, @_pager-background-hover);
            .lib-background-gradient(
                @_pager-gradient-color-start-hover,
                @_pager-gradient-color-end-hover,
                @_pager-gradient-direction,
                @_pager-gradient
            );
            .lib-css(border, @_pager-border-hover);
            .lib-css(color, @_pager-color-hover);
            .lib-css(text-decoration, @_pager-text-decoration-hover);
        }

        &:active {
            .lib-css(background, @_pager-background-active);
            .lib-background-gradient(
                @_pager-gradient-color-start-active,
                @_pager-gradient-color-end-active,
                @_pager-gradient-direction,
                @_pager-gradient
            );
            .lib-css(border, @_pager-border-active);
            .lib-css(color, @_pager-color-active);
        }
    }

    strong.page {
        .lib-css(background, @_pager-current-background);
        .lib-background-gradient(
            @_pager-current-gradient-color-start,
            @_pager-current-gradient-color-end,
            @_pager-current-gradient-direction,
            @_pager-current-gradient
        );
        .lib-css(border, @_pager-current-border);
        ._lib-pager-inline-block-spaces-item(
            @_pager-reset-spaces,
            @_pager-item-display,
            @_pager-font-size,
            @_pager-line-height
        );
        .lib-css(color, @_pager-current-color);
        .lib-css(display, @_pager-item-display);
        .lib-css(font-weight, @_pager-current-font-weight);
        .lib-css(padding, @_pager-item-padding);
    }

    .action {
        .lib-css(background, @_pager-action-background);
        .lib-background-gradient(
            @_pager-action-gradient-color-start,
            @_pager-action-gradient-color-end,
            @_pager-gradient-direction,
            @_pager-action-gradient
        );
        .lib-css(border, @_pager-action-border);
        .lib-css(color, @_pager-action-color);
        .lib-css(display, @_pager-item-display);
        .lib-css(padding, @_pager-actions-padding);
        .lib-css(text-decoration, @_pager-action-text-decoration);

        &:visited {
            .lib-css(background, @_pager-action-background-visited);
            .lib-background-gradient(
                @_pager-action-gradient-color-start-visited,
                @_pager-action-gradient-color-end-visited,
                @_pager-action-gradient-direction,
                @_pager-action-gradient
            );
            .lib-css(border, @_pager-action-border-visited);
            .lib-css(color, @_pager-action-color-visited);
        }

        &:hover {
            .lib-css(background, @_pager-action-background-hover);
            .lib-background-gradient(
                @_pager-action-gradient-color-start-hover,
                @_pager-action-gradient-color-end-hover,
                @_pager-action-gradient-direction,
                @_pager-action-gradient
            );
            .lib-css(border, @_pager-action-border-hover);
            .lib-css(color, @_pager-action-color-hover);
            .lib-css(text-decoration, @_pager-action-text-decoration-hover);
        }

        &:active {
            .lib-css(background, @_pager-action-background-active);
            .lib-background-gradient(
                @_pager-action-gradient-color-start-active,
                @_pager-action-gradient-color-end-active,
                @_pager-action-gradient-direction,
                @_pager-action-gradient
            );
            .lib-css(border, @_pager-action-border-active);
            .lib-css(color, @_pager-action-color-active);
        }

        &.next {
            ._lib-pager-icon (
                @_icon-font-content: @_pager-icon-next-content,
                @_pager-icon-use: @_pager-icon-use,
                @_icon-font: @_pager-icon-font,
                @_icon-font-size: @_pager-icon-font-size,
                @_icon-font-line-height: @_pager-icon-font-line-height,
                @_icon-font-color: @_pager-action-color,
                @_icon-font-color-visited: @_pager-action-color-visited,
                @_icon-font-color-hover: @_pager-action-color-hover,
                @_icon-font-color-active: @_pager-action-color-active,
                @_icon-font-margin: @_pager-icon-font-margin,
                @_icon-font-vertical-align: @_pager-icon-font-vertical-align,
                @_icon-font-position: @_pager-icon-font-position,
                @_icon-font-text-hide: @_pager-icon-font-text-hide
            );
        }

        &.previous {
            ._lib-pager-icon (
                @_icon-font-content: @_pager-icon-previous-content,
                @_pager-icon-use: @_pager-icon-use,
                @_icon-font: @_pager-icon-font,
                @_icon-font-size: @_pager-icon-font-size,
                @_icon-font-line-height: @_pager-icon-font-line-height,
                @_icon-font-color: @_pager-action-color,
                @_icon-font-color-visited: @_pager-action-color-visited,
                @_icon-font-color-hover: @_pager-action-color-hover,
                @_icon-font-color-active: @_pager-action-color-active,
                @_icon-font-margin: @_pager-icon-font-margin,
                @_icon-font-vertical-align: @_pager-icon-font-vertical-align,
                @_icon-font-position: @_pager-icon-font-position,
                @_icon-font-text-hide: @_pager-icon-font-text-hide
            );
        }
    }
}

//  Delete spaces between elements when pager items have display: inline-block
._lib-pager-inline-block-spaces-container(
    @_pager-reset-spaces,
    @_pager-item-display
) when (@_pager-reset-spaces = true) and (@_pager-item-display = inline-block) {
    .lib-inline-block-space-container();
    white-space: nowrap;
}

._lib-pager-inline-block-spaces-item(
    @_pager-reset-spaces,
    @_pager-item-display,
    @_pager-font-size,
    @_pager-line-height
) when (@_pager-reset-spaces = true) and (@_pager-item-display = inline-block) {
    .lib-inline-block-space-item(
        @_font-size: @_pager-font-size,
        @_line-height: @_pager-line-height
    );
}

// Display or hide "page" label
._lib-pager-label-display(
    @_pager-label-display,
    @_pager-font-size,
    @_pager-font-weight,
    @_pager-line-height
) when not (@_pager-label-display = none){
    > .label {
        .lib-css(display, @_pager-label-display);
        .lib-css(font-weight, @_pager-font-weight);
        .lib-inline-block-space-item(
            @_font-size: @_pager-font-size,
            @_line-height: @_pager-line-height
        );

        &:after {
            content: ': ';
        }
    }
}

._lib-pager-label-display(
    @_pager-label-display,
    @_pager-font-size,
    @_pager-font-weight,
    @_pager-line-height
) when (@_pager-label-display = none) {
    > .label {
        .lib-visually-hidden();
    }
}

._lib-pager-label-display(
    @_pager-label-display,
    @_pager-font-size,
    @_pager-font-weight,
    @_pager-line-height
) when (@_pager-label-display = false) {
    > .label {
        .lib-visually-hidden();
    }
}

._lib-pager-icon (
    @_pager-icon-use,
    @_icon-font-content,
    @_icon-font,
    @_icon-font-size,
    @_icon-font-line-height,
    @_icon-font-color,
    @_icon-font-color-visited,
    @_icon-font-color-hover,
    @_icon-font-color-active,
    @_icon-font-margin,
    @_icon-font-vertical-align,
    @_icon-font-position,
    @_icon-font-text-hide
) when (@_pager-icon-use = true) and (@_icon-font-position = before) {
    &:visited {
        &:before {
            .lib-css(color, @_icon-font-color-visited);
        }
    }

    &:active {
        &:before {
            .lib-css(color, @_icon-font-color-active);
        }
    }

    .lib-icon-font(
        @_icon-font-content: @_icon-font-content,
        @_icon-font: @_icon-font,
        @_icon-font-size: @_icon-font-size,
        @_icon-font-line-height: @_icon-font-line-height,
        @_icon-font-color: @_icon-font-color,
        @_icon-font-color-hover: @_icon-font-color-hover,
        @_icon-font-color-active: @_icon-font-color-active,
        @_icon-font-margin: @_icon-font-margin,
        @_icon-font-vertical-align: @_icon-font-vertical-align,
        @_icon-font-position: @_icon-font-position,
        @_icon-font-text-hide: @_icon-font-text-hide
    );
}

._lib-pager-icon (
    @_icon-font-content,
    @_pager-icon-use,
    @_icon-font,
    @_icon-font-size,
    @_icon-font-line-height,
    @_icon-font-color,
    @_icon-font-color-visited,
    @_icon-font-color-hover,
    @_icon-font-color-active,
    @_icon-font-margin,
    @_icon-font-vertical-align,
    @_icon-font-position,
    @_icon-font-text-hide
) when (@_pager-icon-use = true) and (@_icon-font-position = after) {
    .lib-icon-font(
        @_icon-font-content: @_icon-font-content,
        @_icon-font: @_icon-font,
        @_icon-font-size: @_icon-font-size,
        @_icon-font-line-height: @_icon-font-line-height,
        @_icon-font-color: @_icon-font-color,
        @_icon-font-color-hover: @_icon-font-color-hover,
        @_icon-font-color-active: @_icon-font-color-active,
        @_icon-font-margin: @_icon-font-margin,
        @_icon-font-vertical-align: @_icon-font-vertical-align,
        @_icon-font-position: @_icon-font-position,
        @_icon-font-text-hide: @_icon-font-text-hide
    );

    &:visited:after {
        .lib-css(color, @_icon-font-color-visited);
    }

    &:active:after {
        .lib-css(color, @_icon-font-color-active);
    }
}
