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 a } 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 { resetComponent as s, textEllipsis as u, genFocusStyle as $ } from "../../style/index.mjs";
import { genStyleHooks as g } from "../../theme/util/genComponentStyleHook.mjs";
import { merge as b } from "../../theme/util/statistic.mjs";
import v from "./motion.mjs";
const m = (i) => {
  const {
    componentCls: r,
    tabsCardPadding: e,
    cardBg: o,
    cardGutter: t,
    colorBorderSecondary: n,
    itemSelectedColor: d
  } = i;
  return {
    [`${r}-card`]: {
      [`> ${r}-nav, > div > ${r}-nav`]: {
        [`${r}-tab`]: {
          margin: 0,
          padding: e,
          background: o,
          border: `${a(i.lineWidth)} ${i.lineType} ${n}`,
          transition: `all ${i.motionDurationSlow} ${i.motionEaseInOut}`
        },
        [`${r}-tab-active`]: {
          color: d,
          background: i.colorBgContainer
        },
        [`${r}-ink-bar`]: {
          visibility: "hidden"
        }
      },
      // ========================== Top & Bottom ==========================
      [`&${r}-top, &${r}-bottom`]: {
        [`> ${r}-nav, > div > ${r}-nav`]: {
          [`${r}-tab + ${r}-tab`]: {
            marginLeft: {
              _skip_check_: !0,
              value: a(t)
            }
          }
        }
      },
      [`&${r}-top`]: {
        [`> ${r}-nav, > div > ${r}-nav`]: {
          [`${r}-tab`]: {
            borderRadius: `${a(i.borderRadiusLG)} ${a(i.borderRadiusLG)} 0 0`
          },
          [`${r}-tab-active`]: {
            borderBottomColor: i.colorBgContainer
          }
        }
      },
      [`&${r}-bottom`]: {
        [`> ${r}-nav, > div > ${r}-nav`]: {
          [`${r}-tab`]: {
            borderRadius: `0 0 ${a(i.borderRadiusLG)} ${a(i.borderRadiusLG)}`
          },
          [`${r}-tab-active`]: {
            borderTopColor: i.colorBgContainer
          }
        }
      },
      // ========================== Left & Right ==========================
      [`&${r}-left, &${r}-right`]: {
        [`> ${r}-nav, > div > ${r}-nav`]: {
          [`${r}-tab + ${r}-tab`]: {
            marginTop: a(t)
          }
        }
      },
      [`&${r}-left`]: {
        [`> ${r}-nav, > div > ${r}-nav`]: {
          [`${r}-tab`]: {
            borderRadius: {
              _skip_check_: !0,
              value: `${a(i.borderRadiusLG)} 0 0 ${a(i.borderRadiusLG)}`
            }
          },
          [`${r}-tab-active`]: {
            borderRightColor: {
              _skip_check_: !0,
              value: i.colorBgContainer
            }
          }
        }
      },
      [`&${r}-right`]: {
        [`> ${r}-nav, > div > ${r}-nav`]: {
          [`${r}-tab`]: {
            borderRadius: {
              _skip_check_: !0,
              value: `0 ${a(i.borderRadiusLG)} ${a(i.borderRadiusLG)} 0`
            }
          },
          [`${r}-tab-active`]: {
            borderLeftColor: {
              _skip_check_: !0,
              value: i.colorBgContainer
            }
          }
        }
      }
    }
  };
}, h = (i) => {
  const {
    componentCls: r,
    itemHoverColor: e,
    dropdownEdgeChildVerticalPadding: o
  } = i;
  return {
    [`${r}-dropdown`]: Object.assign(Object.assign({}, s(i)), {
      position: "absolute",
      top: -9999,
      left: {
        _skip_check_: !0,
        value: -9999
      },
      zIndex: i.zIndexPopup,
      display: "block",
      "&-hidden": {
        display: "none"
      },
      [`${r}-dropdown-menu`]: {
        maxHeight: i.tabsDropdownHeight,
        margin: 0,
        padding: `${a(o)} 0`,
        overflowX: "hidden",
        overflowY: "auto",
        textAlign: {
          _skip_check_: !0,
          value: "left"
        },
        listStyleType: "none",
        backgroundColor: i.colorBgContainer,
        backgroundClip: "padding-box",
        borderRadius: i.borderRadiusLG,
        outline: "none",
        boxShadow: i.boxShadowSecondary,
        "&-item": Object.assign(Object.assign({}, u), {
          display: "flex",
          alignItems: "center",
          minWidth: i.tabsDropdownWidth,
          margin: 0,
          padding: `${a(i.paddingXXS)} ${a(i.paddingSM)}`,
          color: i.colorText,
          fontWeight: "normal",
          fontSize: i.fontSize,
          lineHeight: i.lineHeight,
          cursor: "pointer",
          transition: `all ${i.motionDurationSlow}`,
          "> span": {
            flex: 1,
            whiteSpace: "nowrap"
          },
          "&-remove": {
            flex: "none",
            marginLeft: {
              _skip_check_: !0,
              value: i.marginSM
            },
            color: i.colorTextDescription,
            fontSize: i.fontSizeSM,
            background: "transparent",
            border: 0,
            cursor: "pointer",
            "&:hover": {
              color: e
            }
          },
          "&:hover": {
            background: i.controlItemBgHover
          },
          "&-disabled": {
            "&, &:hover": {
              color: i.colorTextDisabled,
              background: "transparent",
              cursor: "not-allowed"
            }
          }
        })
      }
    })
  };
}, _ = (i) => {
  const {
    componentCls: r,
    margin: e,
    colorBorderSecondary: o,
    horizontalMargin: t,
    verticalItemPadding: n,
    verticalItemMargin: d,
    calc: c
  } = i;
  return {
    // ========================== Top & Bottom ==========================
    [`${r}-top, ${r}-bottom`]: {
      flexDirection: "column",
      [`> ${r}-nav, > div > ${r}-nav`]: {
        margin: t,
        "&::before": {
          position: "absolute",
          right: {
            _skip_check_: !0,
            value: 0
          },
          left: {
            _skip_check_: !0,
            value: 0
          },
          borderBottom: `${a(i.lineWidth)} ${i.lineType} ${o}`,
          content: "''"
        },
        [`${r}-ink-bar`]: {
          height: i.lineWidthBold,
          "&-animated": {
            transition: `width ${i.motionDurationSlow}, left ${i.motionDurationSlow},
            right ${i.motionDurationSlow}`
          }
        },
        [`${r}-nav-wrap`]: {
          "&::before, &::after": {
            top: 0,
            bottom: 0,
            width: i.controlHeight
          },
          "&::before": {
            left: {
              _skip_check_: !0,
              value: 0
            },
            boxShadow: i.boxShadowTabsOverflowLeft
          },
          "&::after": {
            right: {
              _skip_check_: !0,
              value: 0
            },
            boxShadow: i.boxShadowTabsOverflowRight
          },
          [`&${r}-nav-wrap-ping-left::before`]: {
            opacity: 1
          },
          [`&${r}-nav-wrap-ping-right::after`]: {
            opacity: 1
          }
        }
      }
    },
    [`${r}-top`]: {
      [`> ${r}-nav,
        > div > ${r}-nav`]: {
        "&::before": {
          bottom: 0
        },
        [`${r}-ink-bar`]: {
          bottom: 0
        }
      }
    },
    [`${r}-bottom`]: {
      [`> ${r}-nav, > div > ${r}-nav`]: {
        order: 1,
        marginTop: e,
        marginBottom: 0,
        "&::before": {
          top: 0
        },
        [`${r}-ink-bar`]: {
          top: 0
        }
      },
      [`> ${r}-content-holder, > div > ${r}-content-holder`]: {
        order: 0
      }
    },
    // ========================== Left & Right ==========================
    [`${r}-left, ${r}-right`]: {
      [`> ${r}-nav, > div > ${r}-nav`]: {
        flexDirection: "column",
        minWidth: c(i.controlHeight).mul(1.25).equal(),
        // >>>>>>>>>>> Tab
        [`${r}-tab`]: {
          padding: n,
          textAlign: "center"
        },
        [`${r}-tab + ${r}-tab`]: {
          margin: d
        },
        // >>>>>>>>>>> Nav
        [`${r}-nav-wrap`]: {
          flexDirection: "column",
          "&::before, &::after": {
            right: {
              _skip_check_: !0,
              value: 0
            },
            left: {
              _skip_check_: !0,
              value: 0
            },
            height: i.controlHeight
          },
          "&::before": {
            top: 0,
            boxShadow: i.boxShadowTabsOverflowTop
          },
          "&::after": {
            bottom: 0,
            boxShadow: i.boxShadowTabsOverflowBottom
          },
          [`&${r}-nav-wrap-ping-top::before`]: {
            opacity: 1
          },
          [`&${r}-nav-wrap-ping-bottom::after`]: {
            opacity: 1
          }
        },
        // >>>>>>>>>>> Ink Bar
        [`${r}-ink-bar`]: {
          width: i.lineWidthBold,
          "&-animated": {
            transition: `height ${i.motionDurationSlow}, top ${i.motionDurationSlow}`
          }
        },
        [`${r}-nav-list, ${r}-nav-operations`]: {
          flex: "1 0 auto",
          // fix safari scroll problem
          flexDirection: "column"
        }
      }
    },
    [`${r}-left`]: {
      [`> ${r}-nav, > div > ${r}-nav`]: {
        [`${r}-ink-bar`]: {
          right: {
            _skip_check_: !0,
            value: 0
          }
        }
      },
      [`> ${r}-content-holder, > div > ${r}-content-holder`]: {
        marginLeft: {
          _skip_check_: !0,
          value: a(c(i.lineWidth).mul(-1).equal())
        },
        borderLeft: {
          _skip_check_: !0,
          value: `${a(i.lineWidth)} ${i.lineType} ${i.colorBorder}`
        },
        [`> ${r}-content > ${r}-tabpane`]: {
          paddingLeft: {
            _skip_check_: !0,
            value: i.paddingLG
          }
        }
      }
    },
    [`${r}-right`]: {
      [`> ${r}-nav, > div > ${r}-nav`]: {
        order: 1,
        [`${r}-ink-bar`]: {
          left: {
            _skip_check_: !0,
            value: 0
          }
        }
      },
      [`> ${r}-content-holder, > div > ${r}-content-holder`]: {
        order: 0,
        marginRight: {
          _skip_check_: !0,
          value: c(i.lineWidth).mul(-1).equal()
        },
        borderRight: {
          _skip_check_: !0,
          value: `${a(i.lineWidth)} ${i.lineType} ${i.colorBorder}`
        },
        [`> ${r}-content > ${r}-tabpane`]: {
          paddingRight: {
            _skip_check_: !0,
            value: i.paddingLG
          }
        }
      }
    }
  };
}, f = (i) => {
  const {
    componentCls: r,
    cardPaddingSM: e,
    cardPaddingLG: o,
    horizontalItemPaddingSM: t,
    horizontalItemPaddingLG: n
  } = i;
  return {
    [r]: {
      "&-small": {
        [`> ${r}-nav`]: {
          [`${r}-tab`]: {
            padding: t,
            fontSize: i.titleFontSizeSM
          }
        }
      },
      "&-large": {
        [`> ${r}-nav`]: {
          [`${r}-tab`]: {
            padding: n,
            fontSize: i.titleFontSizeLG
          }
        }
      }
    },
    [`${r}-card`]: {
      [`&${r}-small`]: {
        [`> ${r}-nav`]: {
          [`${r}-tab`]: {
            padding: e
          }
        },
        [`&${r}-bottom`]: {
          [`> ${r}-nav ${r}-tab`]: {
            borderRadius: `0 0 ${a(i.borderRadius)} ${a(i.borderRadius)}`
          }
        },
        [`&${r}-top`]: {
          [`> ${r}-nav ${r}-tab`]: {
            borderRadius: `${a(i.borderRadius)} ${a(i.borderRadius)} 0 0`
          }
        },
        [`&${r}-right`]: {
          [`> ${r}-nav ${r}-tab`]: {
            borderRadius: {
              _skip_check_: !0,
              value: `0 ${a(i.borderRadius)} ${a(i.borderRadius)} 0`
            }
          }
        },
        [`&${r}-left`]: {
          [`> ${r}-nav ${r}-tab`]: {
            borderRadius: {
              _skip_check_: !0,
              value: `${a(i.borderRadius)} 0 0 ${a(i.borderRadius)}`
            }
          }
        }
      },
      [`&${r}-large`]: {
        [`> ${r}-nav`]: {
          [`${r}-tab`]: {
            padding: o
          }
        }
      }
    }
  };
}, S = (i) => {
  const {
    componentCls: r,
    itemActiveColor: e,
    itemHoverColor: o,
    iconCls: t,
    tabsHorizontalItemMargin: n,
    horizontalItemPadding: d,
    itemSelectedColor: c,
    itemColor: p
  } = i, l = `${r}-tab`;
  return {
    [l]: {
      position: "relative",
      WebkitTouchCallout: "none",
      WebkitTapHighlightColor: "transparent",
      display: "inline-flex",
      alignItems: "center",
      padding: d,
      fontSize: i.titleFontSize,
      background: "transparent",
      border: 0,
      outline: "none",
      cursor: "pointer",
      color: p,
      "&-btn, &-remove": Object.assign({
        "&:focus:not(:focus-visible), &:active": {
          color: e
        }
      }, $(i)),
      "&-btn": {
        outline: "none",
        transition: "all 0.3s",
        [`${l}-icon:not(:last-child)`]: {
          marginInlineEnd: i.marginSM
        }
      },
      "&-remove": {
        flex: "none",
        marginRight: {
          _skip_check_: !0,
          value: i.calc(i.marginXXS).mul(-1).equal()
        },
        marginLeft: {
          _skip_check_: !0,
          value: i.marginXS
        },
        color: i.colorTextDescription,
        fontSize: i.fontSizeSM,
        background: "transparent",
        border: "none",
        outline: "none",
        cursor: "pointer",
        transition: `all ${i.motionDurationSlow}`,
        "&:hover": {
          color: i.colorTextHeading
        }
      },
      "&:hover": {
        color: o
      },
      [`&${l}-active ${l}-btn`]: {
        color: c,
        textShadow: i.tabsActiveTextShadow
      },
      [`&${l}-disabled`]: {
        color: i.colorTextDisabled,
        cursor: "not-allowed"
      },
      [`&${l}-disabled ${l}-btn, &${l}-disabled ${r}-remove`]: {
        "&:focus, &:active": {
          color: i.colorTextDisabled
        }
      },
      [`& ${l}-remove ${t}`]: {
        margin: 0
      },
      [`${t}:not(:last-child)`]: {
        marginRight: {
          _skip_check_: !0,
          value: i.marginSM
        }
      }
    },
    [`${l} + ${l}`]: {
      margin: {
        _skip_check_: !0,
        value: n
      }
    }
  };
}, x = (i) => {
  const {
    componentCls: r,
    tabsHorizontalItemMarginRTL: e,
    iconCls: o,
    cardGutter: t,
    calc: n
  } = i;
  return {
    [`${r}-rtl`]: {
      direction: "rtl",
      [`${r}-nav`]: {
        [`${r}-tab`]: {
          margin: {
            _skip_check_: !0,
            value: e
          },
          [`${r}-tab:last-of-type`]: {
            marginLeft: {
              _skip_check_: !0,
              value: 0
            }
          },
          [o]: {
            marginRight: {
              _skip_check_: !0,
              value: 0
            },
            marginLeft: {
              _skip_check_: !0,
              value: a(i.marginSM)
            }
          },
          [`${r}-tab-remove`]: {
            marginRight: {
              _skip_check_: !0,
              value: a(i.marginXS)
            },
            marginLeft: {
              _skip_check_: !0,
              value: a(n(i.marginXXS).mul(-1).equal())
            },
            [o]: {
              margin: 0
            }
          }
        }
      },
      [`&${r}-left`]: {
        [`> ${r}-nav`]: {
          order: 1
        },
        [`> ${r}-content-holder`]: {
          order: 0
        }
      },
      [`&${r}-right`]: {
        [`> ${r}-nav`]: {
          order: 0
        },
        [`> ${r}-content-holder`]: {
          order: 1
        }
      },
      // ====================== Card ======================
      [`&${r}-card${r}-top, &${r}-card${r}-bottom`]: {
        [`> ${r}-nav, > div > ${r}-nav`]: {
          [`${r}-tab + ${r}-tab`]: {
            marginRight: {
              _skip_check_: !0,
              value: t
            },
            marginLeft: {
              _skip_check_: !0,
              value: 0
            }
          }
        }
      }
    },
    [`${r}-dropdown-rtl`]: {
      direction: "rtl"
    },
    [`${r}-menu-item`]: {
      [`${r}-dropdown-rtl`]: {
        textAlign: {
          _skip_check_: !0,
          value: "right"
        }
      }
    }
  };
}, w = (i) => {
  const {
    componentCls: r,
    tabsCardPadding: e,
    cardHeight: o,
    cardGutter: t,
    itemHoverColor: n,
    itemActiveColor: d,
    colorBorderSecondary: c
  } = i;
  return {
    [r]: Object.assign(Object.assign(Object.assign(Object.assign({}, s(i)), {
      display: "flex",
      // ========================== Navigation ==========================
      [`> ${r}-nav, > div > ${r}-nav`]: {
        position: "relative",
        display: "flex",
        flex: "none",
        alignItems: "center",
        [`${r}-nav-wrap`]: {
          position: "relative",
          display: "flex",
          flex: "auto",
          alignSelf: "stretch",
          overflow: "hidden",
          whiteSpace: "nowrap",
          transform: "translate(0)",
          // Fix chrome render bug
          // >>>>> Ping shadow
          "&::before, &::after": {
            position: "absolute",
            zIndex: 1,
            opacity: 0,
            transition: `opacity ${i.motionDurationSlow}`,
            content: "''",
            pointerEvents: "none"
          }
        },
        [`${r}-nav-list`]: {
          position: "relative",
          display: "flex",
          transition: `opacity ${i.motionDurationSlow}`
        },
        // >>>>>>>> Operations
        [`${r}-nav-operations`]: {
          display: "flex",
          alignSelf: "stretch"
        },
        [`${r}-nav-operations-hidden`]: {
          position: "absolute",
          visibility: "hidden",
          pointerEvents: "none"
        },
        [`${r}-nav-more`]: {
          position: "relative",
          padding: e,
          background: "transparent",
          border: 0,
          color: i.colorText,
          "&::after": {
            position: "absolute",
            right: {
              _skip_check_: !0,
              value: 0
            },
            bottom: 0,
            left: {
              _skip_check_: !0,
              value: 0
            },
            height: i.calc(i.controlHeightLG).div(8).equal(),
            transform: "translateY(100%)",
            content: "''"
          }
        },
        [`${r}-nav-add`]: Object.assign({
          minWidth: o,
          marginLeft: {
            _skip_check_: !0,
            value: t
          },
          padding: `0 ${a(i.paddingXS)}`,
          background: "transparent",
          border: `${a(i.lineWidth)} ${i.lineType} ${c}`,
          borderRadius: `${a(i.borderRadiusLG)} ${a(i.borderRadiusLG)} 0 0`,
          outline: "none",
          cursor: "pointer",
          color: i.colorText,
          transition: `all ${i.motionDurationSlow} ${i.motionEaseInOut}`,
          "&:hover": {
            color: n
          },
          "&:active, &:focus:not(:focus-visible)": {
            color: d
          }
        }, $(i))
      },
      [`${r}-extra-content`]: {
        flex: "none"
      },
      // ============================ InkBar ============================
      [`${r}-ink-bar`]: {
        position: "absolute",
        background: i.inkBarColor,
        pointerEvents: "none"
      }
    }), S(i)), {
      // =========================== TabPanes ===========================
      [`${r}-content`]: {
        position: "relative",
        width: "100%"
      },
      [`${r}-content-holder`]: {
        flex: "auto",
        minWidth: 0,
        minHeight: 0
      },
      [`${r}-tabpane`]: {
        outline: "none",
        "&-hidden": {
          display: "none"
        }
      }
    }),
    [`${r}-centered`]: {
      [`> ${r}-nav, > div > ${r}-nav`]: {
        [`${r}-nav-wrap`]: {
          [`&:not([class*='${r}-nav-wrap-ping'])`]: {
            justifyContent: "center"
          }
        }
      }
    }
  };
}, C = (i) => {
  const r = i.controlHeightLG;
  return {
    zIndexPopup: i.zIndexPopupBase + 50,
    cardBg: i.colorFillAlter,
    cardHeight: r,
    // Initialize with empty string, because cardPadding will be calculated with cardHeight by default.
    cardPadding: `${(r - Math.round(i.fontSize * i.lineHeight)) / 2 - i.lineWidth}px ${i.padding}px`,
    cardPaddingSM: `${i.paddingXXS * 1.5}px ${i.padding}px`,
    cardPaddingLG: `${i.paddingXS}px ${i.padding}px ${i.paddingXXS * 1.5}px`,
    titleFontSize: i.fontSize,
    titleFontSizeLG: i.fontSizeLG,
    titleFontSizeSM: i.fontSize,
    inkBarColor: i.colorPrimary,
    horizontalMargin: `0 0 ${i.margin}px 0`,
    horizontalItemGutter: 32,
    // Fixed Value
    // Initialize with empty string, because horizontalItemMargin will be calculated with horizontalItemGutter by default.
    horizontalItemMargin: "",
    horizontalItemMarginRTL: "",
    horizontalItemPadding: `${i.paddingSM}px 0`,
    horizontalItemPaddingSM: `${i.paddingXS}px 0`,
    horizontalItemPaddingLG: `${i.padding}px 0`,
    verticalItemPadding: `${i.paddingXS}px ${i.paddingLG}px`,
    verticalItemMargin: `${i.margin}px 0 0 0`,
    itemColor: i.colorText,
    itemSelectedColor: i.colorPrimary,
    itemHoverColor: i.colorPrimaryHover,
    itemActiveColor: i.colorPrimaryActive,
    cardGutter: i.marginXXS / 2
  };
}, A = g("Tabs", (i) => {
  const r = b(i, {
    // `cardPadding` is empty by default, so we could calculate with dynamic `cardHeight`
    tabsCardPadding: i.cardPadding,
    dropdownEdgeChildVerticalPadding: i.paddingXXS,
    tabsActiveTextShadow: "0 0 0.25px currentcolor",
    tabsDropdownHeight: 200,
    tabsDropdownWidth: 120,
    tabsHorizontalItemMargin: `0 0 0 ${a(i.horizontalItemGutter)}`,
    tabsHorizontalItemMarginRTL: `0 0 0 ${a(i.horizontalItemGutter)}`
  });
  return [f(r), x(r), _(r), h(r), m(r), w(r), v(r)];
}, C);
export {
  A as default,
  C as prepareComponentToken
};
