var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { useStyle as useAntdStyle } from "@antdv/pro-provider";
import { Keyframes } from "ant-design-vue";
const proLayoutTitleHide = new Keyframes("antBadgeLoadingCircle", {
  "0%": { display: "none", opacity: 0, overflow: "hidden" },
  "80%": {
    overflow: "hidden"
  },
  "100%": {
    display: "unset",
    opacity: 1
  }
});
const genSiderMenuStyle = (token) => {
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
  return {
    [`${token.proComponentsCls}-layout`]: {
      [`${token.antCls}-layout-sider${token.componentCls}`]: {
        background: ((_b = (_a = token.layout) == null ? void 0 : _a.sider) == null ? void 0 : _b.colorMenuBackground) || "transparent"
      },
      [token.componentCls]: {
        "position": "relative",
        "boxSizing": "border-box",
        "&-menu": {
          position: "relative",
          zIndex: 10,
          minHeight: "100%"
        },
        [`& ${token.antCls}-layout-sider-children`]: {
          position: "relative",
          display: "flex",
          flexDirection: "column",
          height: "100%",
          paddingInline: (_d = (_c = token.layout) == null ? void 0 : _c.sider) == null ? void 0 : _d.paddingInlineLayoutMenu,
          paddingBlock: (_f = (_e = token.layout) == null ? void 0 : _e.sider) == null ? void 0 : _f.paddingBlockLayoutMenu,
          borderInlineEnd: `1px solid ${token.colorSplit}`,
          marginInlineEnd: -1
        },
        [`${token.antCls}-menu`]: {
          [`${token.antCls}-menu-item-group-title`]: {
            fontSize: token.fontSizeSM,
            paddingBottom: 4
          },
          [`${token.antCls}-menu-item:not(${token.antCls}-menu-item-selected):hover`]: {
            color: (_h = (_g = token.layout) == null ? void 0 : _g.sider) == null ? void 0 : _h.colorTextMenuItemHover
          }
        },
        "&-logo": {
          "position": "relative",
          "display": "flex",
          "alignItems": "center",
          "justifyContent": "space-between",
          "paddingInline": 12,
          "paddingBlock": 16,
          "color": (_j = (_i = token.layout) == null ? void 0 : _i.sider) == null ? void 0 : _j.colorTextMenu,
          "cursor": "pointer",
          "borderBlockEnd": `1px solid ${(_l = (_k = token.layout) == null ? void 0 : _k.sider) == null ? void 0 : _l.colorMenuItemDivider}`,
          "> a": {
            "display": "flex",
            "alignItems": "center",
            "justifyContent": "center",
            "minHeight": 22,
            "fontSize": 22,
            "> img": {
              display: "inline-block",
              height: 22,
              verticalAlign: "middle"
            },
            "> h1": {
              display: "inline-block",
              height: 22,
              marginBlock: 0,
              marginInlineEnd: 0,
              marginInlineStart: 6,
              color: (_n = (_m = token.layout) == null ? void 0 : _m.sider) == null ? void 0 : _n.colorTextMenuTitle,
              animationName: proLayoutTitleHide,
              animationDuration: ".4s",
              animationTimingFunction: "ease",
              fontWeight: 600,
              fontSize: 16,
              lineHeight: "22px",
              verticalAlign: "middle"
            }
          },
          "&-collapsed": {
            flexDirection: "column-reverse",
            margin: 0,
            padding: 12,
            [`${token.proComponentsCls}-layout-apps-icon`]: {
              marginBlockEnd: 8,
              fontSize: 16,
              transition: "font-size 0.2s ease-in-out,color 0.2s ease-in-out"
            }
          }
        },
        "&-actions": {
          "display": "flex",
          "alignItems": "center",
          "justifyContent": "space-between",
          "marginBlock": 4,
          "marginInline": 0,
          "color": (_p = (_o = token.layout) == null ? void 0 : _o.sider) == null ? void 0 : _p.colorTextMenu,
          "&-collapsed": {
            flexDirection: "column-reverse",
            paddingBlock: 0,
            paddingInline: 8,
            fontSize: 16,
            transition: "font-size 0.3s ease-in-out"
          },
          "&-list": {
            "color": (_r = (_q = token.layout) == null ? void 0 : _q.sider) == null ? void 0 : _r.colorTextMenuSecondary,
            "&-collapsed": {
              marginBlockEnd: 8,
              animationName: "none"
            },
            "&-item": {
              "paddingInline": 6,
              "paddingBlock": 6,
              "lineHeight": "16px",
              "fontSize": 16,
              "cursor": "pointer",
              "borderRadius": token.borderRadius,
              "&:hover": {
                background: token.colorBgTextHover
              }
            }
          },
          "&-avatar": {
            "fontSize": 14,
            "paddingInline": 8,
            "paddingBlock": 8,
            "display": "flex",
            "alignItems": "center",
            "gap": token.marginXS,
            "borderRadius": token.borderRadius,
            "& *": {
              cursor: "pointer"
            },
            "&:hover": {
              background: token.colorBgTextHover
            }
          }
        },
        "&-hide-menu-collapsed": {
          insetInlineStart: `-${token.proLayoutCollapsedWidth - 12}px`,
          position: "absolute"
        },
        "&-extra": {
          "marginBlockEnd": 16,
          "marginBlock": 0,
          "marginInline": 16,
          "&-no-logo": {
            marginBlockStart: 16
          }
        },
        "&-links": {
          width: "100%",
          ul: {
            height: "auto"
          }
        },
        "&-link-menu": {
          border: "none",
          boxShadow: "none",
          background: "transparent"
        },
        "&-footer": {
          color: (_t = (_s = token.layout) == null ? void 0 : _s.sider) == null ? void 0 : _t.colorTextMenuSecondary,
          paddingBlockEnd: 16,
          fontSize: token.fontSize,
          animationName: proLayoutTitleHide,
          animationDuration: ".4s",
          animationTimingFunction: "ease"
        }
      },
      [`${token.componentCls}${token.componentCls}-fixed`]: {
        "position": "fixed",
        "insetBlockStart": 0,
        "insetInlineStart": 0,
        "zIndex": "100",
        "height": "100%",
        "&-mix": {
          height: `calc(100% - ${((_v = (_u = token.layout) == null ? void 0 : _u.header) == null ? void 0 : _v.heightLayoutHeader) || 56}px)`,
          insetBlockStart: `${((_x = (_w = token.layout) == null ? void 0 : _w.header) == null ? void 0 : _x.heightLayoutHeader) || 56}px`
        }
      }
    }
  };
};
function useStyle(prefixCls, {
  proLayoutCollapsedWidth
}) {
  return useAntdStyle("ProLayoutSiderMenu", (token) => {
    const siderMenuToken = __spreadProps(__spreadValues({}, token), {
      componentCls: `.${prefixCls.value}`,
      proLayoutCollapsedWidth
    });
    return [genSiderMenuStyle(siderMenuToken)];
  });
}
export {
  proLayoutTitleHide,
  useStyle
};
