import styled from "styled-components";
import { component, mergeConfig } from "../../engines";
import { addFocus, applyEllipsis } from "../../mixins";
import { buttonConfig, buttonTokens } from "../Button";
import { buttonGroupConfig, buttonGroupTokens } from "../ButtonGroup";
import { classes, tokens } from "./Pagination.tokens";
const mergedButtonConfig = mergeConfig(buttonConfig);
const Button = component(mergedButtonConfig);
const mergedButtonGroupConfig = mergeConfig(buttonGroupConfig);
const ButtonGroup = component(mergedButtonGroupConfig);
export const PaginationRoot = styled.div.withConfig({
    displayName: "Pagination.styles__PaginationRoot",
    componentId: "sc-119c2bc5-0"
})([
    `display:flex;color:var(`,
    `);&.`,
    `{flex-direction:column;gap:0.5rem;justify-content:flex-start;}&.`,
    `{width:100%;justify-content:space-between;flex:0 0 100%;gap:1rem;flex-wrap:nowrap;}`
], tokens.paginationColor, classes.compactType, classes.defaultType);
export const PaginationPages = styled.div.withConfig({
    displayName: "Pagination.styles__PaginationPages",
    componentId: "sc-119c2bc5-1"
})([
    `display:flex;align-items:center;gap:0.25rem;flex-shrink:0;`
]);
export const PaginationActions = styled.div.withConfig({
    displayName: "Pagination.styles__PaginationActions",
    componentId: "sc-119c2bc5-2"
})([
    `display:flex;justify-content:space-between;flex-grow:1;align-items:center;gap:var(`,
    `);flex-shrink:1;flex-direction:row;&.`,
    `{width:100%;flex-wrap:wrap;&.`,
    `{flex-direction:row-reverse;}&.`,
    `{flex-direction:row;}}`
], tokens.paginationHelperTextGap, classes.compactType, classes.withHasPerPageSelect, classes.withHasQuickJump);
export const PaginationSection = styled.div.withConfig({
    displayName: "Pagination.styles__PaginationSection",
    componentId: "sc-119c2bc5-3"
})([
    `display:flex;gap:0.125rem;`
]);
export const PaginationButtonGroup = styled(ButtonGroup).withConfig({
    displayName: "Pagination.styles__PaginationButtonGroup",
    componentId: "sc-119c2bc5-4"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:0;`
], buttonGroupTokens.buttonColor, tokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, tokens.buttonHoverColor, buttonGroupTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, tokens.buttonActiveColor, buttonGroupTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive, buttonGroupTokens.buttonFontFamily, tokens.paginationFontFamily, buttonGroupTokens.buttonFontSize, tokens.paginationFontSize, buttonGroupTokens.buttonFontStyle, tokens.paginationFontStyle, buttonGroupTokens.buttonFontWeight, tokens.paginationFontWeight, buttonGroupTokens.buttonLetterSpacing, tokens.paginationLetterSpacing, buttonGroupTokens.buttonLineHeight, tokens.paginationLineHeight, buttonGroupTokens.buttonWidth, tokens.buttonWidth, buttonGroupTokens.buttonHeight, tokens.buttonHeight, buttonGroupTokens.buttonDefaultRadius, tokens.buttonRadius, buttonGroupTokens.buttonSideRadius, tokens.buttonRadius, buttonGroupTokens.buttonSegmentedRadius, tokens.buttonRadius, buttonGroupTokens.buttonRadiusCircle, tokens.buttonRadius, buttonGroupTokens.buttonPadding);
export const PaginationButton = styled(Button).withConfig({
    displayName: "Pagination.styles__PaginationButton",
    componentId: "sc-119c2bc5-5"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);&.`,
    `{`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);cursor:default;}&.`,
    `{`,
    `:var(`,
    `,var(`,
    `));`,
    `:var(`,
    `,var(`,
    `));}`,
    ``
], buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonColorHover, tokens.buttonHoverColor, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.buttonActiveColor, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive, buttonTokens.buttonFontFamily, tokens.paginationFontFamily, buttonTokens.buttonFontSize, tokens.paginationFontSize, buttonTokens.buttonFontStyle, tokens.paginationFontStyle, buttonTokens.buttonFontWeight, tokens.paginationFontWeight, buttonTokens.buttonLetterSpacing, tokens.paginationLetterSpacing, buttonTokens.buttonLineHeight, tokens.paginationLineHeight, buttonTokens.buttonWidth, tokens.buttonWidth, buttonTokens.buttonHeight, tokens.buttonHeight, buttonTokens.buttonRadius, tokens.buttonRadius, buttonTokens.buttonDisabledOpacity, tokens.buttonDisabledOpacity, buttonTokens.buttonFocusColor, tokens.buttonFocusColor, classes.paginationPageButtonActive, buttonTokens.buttonColor, tokens.paginationCurrentButtonColor, buttonTokens.buttonBackgroundColor, tokens.paginationCurrentButtonBackgroundColor, buttonTokens.buttonColorHover, tokens.paginationCurrentButtonColor, buttonTokens.buttonBackgroundColorHover, tokens.paginationCurrentButtonBackgroundColor, buttonTokens.buttonColorActive, tokens.paginationCurrentButtonColor, buttonTokens.buttonBackgroundColorActive, tokens.paginationCurrentButtonBackgroundColor, classes.buttonDisabled, buttonTokens.buttonColor, tokens.paginationDisabledButtonColor, tokens.buttonColor, buttonTokens.buttonBackgroundColor, tokens.paginationDisabledButtonBackgroundColor, tokens.buttonBackgroundColor, addFocus({
    outlineOffset: 'var(--plasma_private-btn-outline-size)',
    outlineSize: 'var(--plasma_private-btn-outline-size)',
    outlineRadius: 'var(--plasma_private-btn-br)',
    outlineColor: `var(${tokens.buttonFocusColor})`
}));
export const PaginationShorter = styled(PaginationButton).withConfig({
    displayName: "Pagination.styles__PaginationShorter",
    componentId: "sc-119c2bc5-6"
})([
    ``,
    `:var(`,
    `);`,
    `:0;`
], buttonTokens.buttonWidth, tokens.buttonWidthShorter, buttonTokens.buttonPadding);
export const PaginationActionsLeft = styled.div.withConfig({
    displayName: "Pagination.styles__PaginationActionsLeft",
    componentId: "sc-119c2bc5-7"
})([
    `display:flex;align-items:center;flex-wrap:wrap;gap:var(`,
    `);.`,
    ` &{min-width:0;flex-wrap:nowrap;flex-shrink:1;}`
], tokens.paginationHelperTextGap, classes.defaultType);
export const PaginationHelperText = styled.div.withConfig({
    displayName: "Pagination.styles__PaginationHelperText",
    componentId: "sc-119c2bc5-8"
})([
    `color:var(`,
    `);&.`,
    `{min-width:0;`,
    ` flex-shrink:1;}&.`,
    `{`,
    `}`
], tokens.paginationHelperTextColor, classes.defaultType, applyEllipsis(), classes.ellipsisText, applyEllipsis());
