import "../../../../@ant-design/cssinjs/es/extractStyle.mjs";
import "../../../../@ant-design/cssinjs/es/hooks/useCacheToken.mjs";
import "react";
import "../../../../@ant-design/cssinjs/es/StyleContext.mjs";
import { unit as r } from "../../../../@ant-design/cssinjs/es/util/index.mjs";
import "../../../../@ant-design/cssinjs/es/hooks/useCompatibleInsertionEffect.mjs";
import "../../../../@ant-design/cssinjs/es/hooks/useEffectCleanupRegister.mjs";
import "../../../../@ant-design/cssinjs/es/hooks/useHMR.mjs";
import "../../../../rc-util/es/warning.mjs";
import "../../../../@ant-design/cssinjs/es/theme/createTheme.mjs";
import "../../../../@ant-design/cssinjs/es/theme/ThemeCache.mjs";
import "../../../../@ant-design/cssinjs/es/transformers/legacyLogicalProperties.mjs";
import { initComponentToken as t, initInputToken as o, genInputSmallStyle as l, genBasicInputStyle as a } from "../../input/style/index.mjs";
import { resetComponent as c, genFocusStyle as m, genFocusOutline as n } from "../../style/index.mjs";
import { genStyleHooks as s } from "../../theme/util/genComponentStyleHook.mjs";
import { merge as g } from "../../theme/util/statistic.mjs";
const d = (i) => {
  const {
    componentCls: e
  } = i;
  return {
    [`${e}-disabled`]: {
      "&, &:hover": {
        cursor: "not-allowed",
        [`${e}-item-link`]: {
          color: i.colorTextDisabled,
          cursor: "not-allowed"
        }
      },
      "&:focus-visible": {
        cursor: "not-allowed",
        [`${e}-item-link`]: {
          color: i.colorTextDisabled,
          cursor: "not-allowed"
        }
      }
    },
    [`&${e}-disabled`]: {
      cursor: "not-allowed",
      [`${e}-item`]: {
        cursor: "not-allowed",
        "&:hover, &:active": {
          backgroundColor: "transparent"
        },
        a: {
          color: i.colorTextDisabled,
          backgroundColor: "transparent",
          border: "none",
          cursor: "not-allowed"
        },
        "&-active": {
          borderColor: i.colorBorder,
          backgroundColor: i.itemActiveBgDisabled,
          "&:hover, &:active": {
            backgroundColor: i.itemActiveBgDisabled
          },
          a: {
            color: i.itemActiveColorDisabled
          }
        }
      },
      [`${e}-item-link`]: {
        color: i.colorTextDisabled,
        cursor: "not-allowed",
        "&:hover, &:active": {
          backgroundColor: "transparent"
        },
        [`${e}-simple&`]: {
          backgroundColor: "transparent",
          "&:hover, &:active": {
            backgroundColor: "transparent"
          }
        }
      },
      [`${e}-simple-pager`]: {
        color: i.colorTextDisabled
      },
      [`${e}-jump-prev, ${e}-jump-next`]: {
        [`${e}-item-link-icon`]: {
          opacity: 0
        },
        [`${e}-item-ellipsis`]: {
          opacity: 1
        }
      }
    },
    [`&${e}-simple`]: {
      [`${e}-prev, ${e}-next`]: {
        [`&${e}-disabled ${e}-item-link`]: {
          "&:hover, &:active": {
            backgroundColor: "transparent"
          }
        }
      }
    }
  };
}, p = (i) => {
  const {
    componentCls: e
  } = i;
  return {
    [`&${e}-mini ${e}-total-text, &${e}-mini ${e}-simple-pager`]: {
      height: i.itemSizeSM,
      lineHeight: r(i.itemSizeSM)
    },
    [`&${e}-mini ${e}-item`]: {
      minWidth: i.itemSizeSM,
      height: i.itemSizeSM,
      margin: 0,
      lineHeight: r(i.calc(i.itemSizeSM).sub(2).equal())
    },
    [`&${e}-mini:not(${e}-disabled) ${e}-item:not(${e}-item-active)`]: {
      backgroundColor: "transparent",
      borderColor: "transparent",
      "&:hover": {
        backgroundColor: i.colorBgTextHover
      },
      "&:active": {
        backgroundColor: i.colorBgTextActive
      }
    },
    [`&${e}-mini ${e}-prev, &${e}-mini ${e}-next`]: {
      minWidth: i.itemSizeSM,
      height: i.itemSizeSM,
      margin: 0,
      lineHeight: r(i.itemSizeSM)
    },
    [`&${e}-mini:not(${e}-disabled)`]: {
      [`${e}-prev, ${e}-next`]: {
        [`&:hover ${e}-item-link`]: {
          backgroundColor: i.colorBgTextHover
        },
        [`&:active ${e}-item-link`]: {
          backgroundColor: i.colorBgTextActive
        },
        [`&${e}-disabled:hover ${e}-item-link`]: {
          backgroundColor: "transparent"
        }
      }
    },
    [`
    &${e}-mini ${e}-prev ${e}-item-link,
    &${e}-mini ${e}-next ${e}-item-link
    `]: {
      backgroundColor: "transparent",
      borderColor: "transparent",
      "&::after": {
        height: i.itemSizeSM,
        lineHeight: r(i.itemSizeSM)
      }
    },
    [`&${e}-mini ${e}-jump-prev, &${e}-mini ${e}-jump-next`]: {
      height: i.itemSizeSM,
      marginInlineEnd: 0,
      lineHeight: r(i.itemSizeSM)
    },
    [`&${e}-mini ${e}-options`]: {
      marginInlineStart: i.paginationMiniOptionsMarginInlineStart,
      "&-size-changer": {
        top: i.miniOptionsSizeChangerTop
      },
      "&-quick-jumper": {
        height: i.itemSizeSM,
        lineHeight: r(i.itemSizeSM),
        input: Object.assign(Object.assign({}, l(i)), {
          width: i.paginationMiniQuickJumperInputWidth,
          height: i.controlHeightSM
        })
      }
    }
  };
}, u = (i) => {
  const {
    componentCls: e
  } = i;
  return {
    [`
    &${e}-simple ${e}-prev,
    &${e}-simple ${e}-next
    `]: {
      height: i.itemSizeSM,
      lineHeight: r(i.itemSizeSM),
      verticalAlign: "top",
      [`${e}-item-link`]: {
        height: i.itemSizeSM,
        backgroundColor: "transparent",
        border: 0,
        "&:hover": {
          backgroundColor: i.colorBgTextHover
        },
        "&:active": {
          backgroundColor: i.colorBgTextActive
        },
        "&::after": {
          height: i.itemSizeSM,
          lineHeight: r(i.itemSizeSM)
        }
      }
    },
    [`&${e}-simple ${e}-simple-pager`]: {
      display: "inline-block",
      height: i.itemSizeSM,
      marginInlineEnd: i.marginXS,
      input: {
        boxSizing: "border-box",
        height: "100%",
        marginInlineEnd: i.marginXS,
        padding: `0 ${r(i.paginationItemPaddingInline)}`,
        textAlign: "center",
        backgroundColor: i.itemInputBg,
        border: `${r(i.lineWidth)} ${i.lineType} ${i.colorBorder}`,
        borderRadius: i.borderRadius,
        outline: "none",
        transition: `border-color ${i.motionDurationMid}`,
        color: "inherit",
        "&:hover": {
          borderColor: i.colorPrimary
        },
        "&:focus": {
          borderColor: i.colorPrimaryHover,
          boxShadow: `${r(i.inputOutlineOffset)} 0 ${r(i.controlOutlineWidth)} ${i.controlOutline}`
        },
        "&[disabled]": {
          color: i.colorTextDisabled,
          backgroundColor: i.colorBgContainerDisabled,
          borderColor: i.colorBorder,
          cursor: "not-allowed"
        }
      }
    }
  };
}, b = (i) => {
  const {
    componentCls: e
  } = i;
  return {
    [`${e}-jump-prev, ${e}-jump-next`]: {
      outline: 0,
      [`${e}-item-container`]: {
        position: "relative",
        [`${e}-item-link-icon`]: {
          color: i.colorPrimary,
          fontSize: i.fontSizeSM,
          opacity: 0,
          transition: `all ${i.motionDurationMid}`,
          "&-svg": {
            top: 0,
            insetInlineEnd: 0,
            bottom: 0,
            insetInlineStart: 0,
            margin: "auto"
          }
        },
        [`${e}-item-ellipsis`]: {
          position: "absolute",
          top: 0,
          insetInlineEnd: 0,
          bottom: 0,
          insetInlineStart: 0,
          display: "block",
          margin: "auto",
          color: i.colorTextDisabled,
          fontFamily: "Arial, Helvetica, sans-serif",
          letterSpacing: i.paginationEllipsisLetterSpacing,
          textAlign: "center",
          textIndent: i.paginationEllipsisTextIndent,
          opacity: 1,
          transition: `all ${i.motionDurationMid}`
        }
      },
      "&:hover": {
        [`${e}-item-link-icon`]: {
          opacity: 1
        },
        [`${e}-item-ellipsis`]: {
          opacity: 0
        }
      }
    },
    [`
    ${e}-prev,
    ${e}-jump-prev,
    ${e}-jump-next
    `]: {
      marginInlineEnd: i.marginXS
    },
    [`
    ${e}-prev,
    ${e}-next,
    ${e}-jump-prev,
    ${e}-jump-next
    `]: {
      display: "inline-block",
      minWidth: i.itemSize,
      height: i.itemSize,
      color: i.colorText,
      fontFamily: i.fontFamily,
      lineHeight: `${r(i.itemSize)}`,
      textAlign: "center",
      verticalAlign: "middle",
      listStyle: "none",
      borderRadius: i.borderRadius,
      cursor: "pointer",
      transition: `all ${i.motionDurationMid}`
    },
    [`${e}-prev, ${e}-next`]: {
      fontFamily: "Arial, Helvetica, sans-serif",
      outline: 0,
      button: {
        color: i.colorText,
        cursor: "pointer",
        userSelect: "none"
      },
      [`${e}-item-link`]: {
        display: "block",
        width: "100%",
        height: "100%",
        padding: 0,
        fontSize: i.fontSizeSM,
        textAlign: "center",
        backgroundColor: "transparent",
        border: `${r(i.lineWidth)} ${i.lineType} transparent`,
        borderRadius: i.borderRadius,
        outline: "none",
        transition: `all ${i.motionDurationMid}`
      },
      [`&:hover ${e}-item-link`]: {
        backgroundColor: i.colorBgTextHover
      },
      [`&:active ${e}-item-link`]: {
        backgroundColor: i.colorBgTextActive
      },
      [`&${e}-disabled:hover`]: {
        [`${e}-item-link`]: {
          backgroundColor: "transparent"
        }
      }
    },
    [`${e}-slash`]: {
      marginInlineEnd: i.paginationSlashMarginInlineEnd,
      marginInlineStart: i.paginationSlashMarginInlineStart
    },
    [`${e}-options`]: {
      display: "inline-block",
      marginInlineStart: i.margin,
      verticalAlign: "middle",
      "&-size-changer.-select": {
        display: "inline-block",
        width: "auto"
      },
      "&-quick-jumper": {
        display: "inline-block",
        height: i.controlHeight,
        marginInlineStart: i.marginXS,
        lineHeight: r(i.controlHeight),
        verticalAlign: "top",
        input: Object.assign(Object.assign({}, a(i)), {
          width: i.calc(i.controlHeightLG).mul(1.25).equal(),
          height: i.controlHeight,
          boxSizing: "border-box",
          margin: 0,
          marginInlineStart: i.marginXS,
          marginInlineEnd: i.marginXS
        })
      }
    }
  };
}, $ = (i) => {
  const {
    componentCls: e
  } = i;
  return {
    [`${e}-item`]: {
      display: "inline-block",
      minWidth: i.itemSize,
      height: i.itemSize,
      marginInlineEnd: i.marginXS,
      fontFamily: i.fontFamily,
      lineHeight: r(i.calc(i.itemSize).sub(2).equal()),
      textAlign: "center",
      verticalAlign: "middle",
      listStyle: "none",
      backgroundColor: "transparent",
      border: `${r(i.lineWidth)} ${i.lineType} transparent`,
      borderRadius: i.borderRadius,
      outline: 0,
      cursor: "pointer",
      userSelect: "none",
      a: {
        display: "block",
        padding: `0 ${r(i.paginationItemPaddingInline)}`,
        color: i.colorText,
        "&:hover": {
          textDecoration: "none"
        }
      },
      [`&:not(${e}-item-active)`]: {
        "&:hover": {
          transition: `all ${i.motionDurationMid}`,
          backgroundColor: i.colorBgTextHover
        },
        "&:active": {
          backgroundColor: i.colorBgTextActive
        }
      },
      "&-active": {
        fontWeight: i.fontWeightStrong,
        backgroundColor: i.itemActiveBg,
        borderColor: i.colorPrimary,
        a: {
          color: i.colorPrimary
        },
        "&:hover": {
          borderColor: i.colorPrimaryHover
        },
        "&:hover a": {
          color: i.colorPrimaryHover
        }
      }
    }
  };
}, S = (i) => {
  const {
    componentCls: e
  } = i;
  return {
    [e]: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, c(i)), {
      "ul, ol": {
        margin: 0,
        padding: 0,
        listStyle: "none"
      },
      "&::after": {
        display: "block",
        clear: "both",
        height: 0,
        overflow: "hidden",
        visibility: "hidden",
        content: '""'
      },
      [`${e}-total-text`]: {
        display: "inline-block",
        height: i.itemSize,
        marginInlineEnd: i.marginXS,
        lineHeight: r(i.calc(i.itemSize).sub(2).equal()),
        verticalAlign: "middle"
      }
    }), $(i)), b(i)), u(i)), p(i)), d(i)), {
      // media query style
      [`@media only screen and (max-width: ${i.screenLG}px)`]: {
        [`${e}-item`]: {
          "&-after-jump-prev, &-before-jump-next": {
            display: "none"
          }
        }
      },
      [`@media only screen and (max-width: ${i.screenSM}px)`]: {
        [`${e}-options`]: {
          display: "none"
        }
      }
    }),
    // rtl style
    [`&${i.componentCls}-rtl`]: {
      direction: "rtl"
    }
  };
}, h = (i) => {
  const {
    componentCls: e
  } = i;
  return {
    [`${e}:not(${e}-disabled)`]: {
      [`${e}-item`]: Object.assign({}, m(i)),
      [`${e}-jump-prev, ${e}-jump-next`]: {
        "&:focus-visible": Object.assign({
          [`${e}-item-link-icon`]: {
            opacity: 1
          },
          [`${e}-item-ellipsis`]: {
            opacity: 0
          }
        }, n(i))
      },
      [`${e}-prev, ${e}-next`]: {
        [`&:focus-visible ${e}-item-link`]: Object.assign({}, n(i))
      }
    }
  };
}, v = (i) => Object.assign({
  itemBg: i.colorBgContainer,
  itemSize: i.controlHeight,
  itemSizeSM: i.controlHeightSM,
  itemActiveBg: i.colorBgContainer,
  itemLinkBg: i.colorBgContainer,
  itemActiveColorDisabled: i.colorTextDisabled,
  itemActiveBgDisabled: i.controlItemBgActiveDisabled,
  itemInputBg: i.colorBgContainer,
  miniOptionsSizeChangerTop: 0
}, t(i)), x = (i) => g(i, {
  inputOutlineOffset: 0,
  paginationMiniOptionsMarginInlineStart: i.calc(i.marginXXS).div(2).equal(),
  paginationMiniQuickJumperInputWidth: i.calc(i.controlHeightLG).mul(1.1).equal(),
  paginationItemPaddingInline: i.calc(i.marginXXS).mul(1.5).equal(),
  paginationEllipsisLetterSpacing: i.calc(i.marginXXS).div(2).equal(),
  paginationSlashMarginInlineStart: i.marginXXS,
  paginationSlashMarginInlineEnd: i.marginSM,
  paginationEllipsisTextIndent: "0.13em"
  // magic for ui experience
}, o(i)), X = s("Pagination", (i) => {
  const e = x(i);
  return [S(e), h(e)];
}, v);
export {
  X as default,
  v as prepareComponentToken,
  x as prepareToken
};
