import { genComponentStyleHook as n } from "../../../utils/cssinjs/index.mjs";
const i = (e) => {
  const { componentCls: t } = e;
  return {
    [t]: {
      "& > .ant-btn": {
        padding: 0
      },
      "& > .ant-dropdown-trigger": {
        color: e.textColor3
      },
      [`${t}-main-content`]: {
        paddingInline: e.space,
        paddingBlock: e.spaceXS,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        "&-disabled": {
          color: e.textColor4,
          cursor: "not-allowed"
        }
      },
      [`${t}-icon`]: {
        width: "100%",
        height: "100%",
        fontSize: e.fontSizeLG,
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
      }
    },
    [`${t}-main-content-popover`]: {
      width: e.apViewPopoverWidth,
      "&-title-content": {
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        marginBottom: e.space,
        "&-title": {
          fontSize: e.fontSizeLG,
          fontWeight: 500,
          lineHeight: e.lineHeightLG
        },
        ".ant-form-item": {
          marginBottom: 0
        }
      },
      "&-btn": {
        marginBottom: 0,
        ".ant-form-item-control-input-content": {
          display: "flex",
          justifyContent: "flex-end"
        }
      }
    },
    [`${t}-overlay`]: {
      ".ant-dropdown-menu": {
        padding: e.space,
        "&-item": {
          padding: "0 !important",
          "&:hover": {
            backgroundColor: "transparent !important"
          }
        }
      },
      [`${t}-menu-list-content`]: {
        width: e.apViewMenuListWidth,
        display: "flex",
        paddingBlock: e.spaceSM,
        paddingInline: e.space,
        alignItems: "center",
        height: e.calc(e.controlHeight).add(e.calc(e.lineWidth).mul(2)).equal(),
        ".menu-list-content-name": {
          overflow: "hidden",
          display: "block",
          textOverflow: "ellipsis",
          whiteSpace: "nowrap",
          fontSize: e.fontSize,
          marginInlineEnd: e.space
        },
        ".menu-list-content-default": {
          marginInlineEnd: e.space,
          flexShrink: 0
        },
        ".menu-list-content-action": {
          cursor: "default",
          display: "none",
          flexShrink: 0,
          marginLeft: "auto",
          userSelect: "none",
          "&-text": {
            cursor: "pointer",
            fontSize: e.fontSize,
            display: "flex",
            alignItems: "center",
            color: e.colorPrimary
          },
          "&-delete": {
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            color: e.textColor3,
            svg: {
              outline: "none",
              boxShadow: "none"
            }
          }
        },
        ".menu-list-content-edit": {
          display: "flex",
          alignItems: "center",
          ".ant-form-item": {
            marginBottom: 0
          },
          ".ant-space-item:has(.menu-list-content-action-text)": {
            flexShrink: 0
          }
        },
        "&-edit": {
          background: "transparent !important",
          paddingInline: e.space,
          paddingBlock: 0,
          cursor: "default"
        },
        "&:hover": {
          background: e.colorBg3,
          ".menu-list-content-action": {
            display: "block"
          }
        }
      },
      [`${t}-menu-list-content-active`]: {
        background: `${e.calc(e.colorPrimary).colorMix(8)} !important`,
        ".menu-list-content-name": {
          color: e.colorPrimary
        }
      }
    }
  };
}, a = n(
  "ApView",
  (e) => [i(e)],
  {
    apViewPopoverWidth: 340,
    apViewMenuListWidth: 250
  }
);
export {
  a as default,
  i as genApViewStyle
};
