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 g } 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 z from "../../../../@ant-design/cssinjs/es/Keyframes.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 { CONTAINER_MAX_OFFSET as H } from "../../_util/hooks/useZIndex.mjs";
import { resetComponent as y } from "../../style/index.mjs";
import { genStyleHooks as I } from "../../theme/util/genComponentStyleHook.mjs";
import { merge as v } from "../../theme/util/statistic.mjs";
import x from "./placement.mjs";
import C from "./stack.mjs";
const w = (i) => {
  const {
    iconCls: o,
    componentCls: t,
    // .ant-notification
    boxShadow: a,
    fontSizeLG: e,
    notificationMarginBottom: r,
    borderRadiusLG: c,
    colorSuccess: l,
    colorInfo: p,
    colorWarning: s,
    colorError: f,
    colorTextHeading: u,
    notificationBg: $,
    notificationPadding: S,
    notificationMarginEdge: h,
    fontSize: m,
    lineHeight: M,
    width: B,
    notificationIconSize: d,
    colorText: b
  } = i, n = `${t}-notice`;
  return {
    position: "relative",
    marginBottom: r,
    marginInlineStart: "auto",
    background: $,
    borderRadius: c,
    boxShadow: a,
    [n]: {
      padding: S,
      width: B,
      maxWidth: `calc(100vw - ${g(i.calc(h).mul(2).equal())})`,
      overflow: "hidden",
      lineHeight: M,
      wordWrap: "break-word"
    },
    [`${t}-close-icon`]: {
      fontSize: m,
      cursor: "pointer"
    },
    [`${n}-message`]: {
      marginBottom: i.marginXS,
      color: u,
      fontSize: e,
      lineHeight: i.lineHeightLG
    },
    [`${n}-description`]: {
      fontSize: m,
      color: b
    },
    [`${n}-closable ${n}-message`]: {
      paddingInlineEnd: i.paddingLG
    },
    [`${n}-with-icon ${n}-message`]: {
      marginBottom: i.marginXS,
      marginInlineStart: i.calc(i.marginSM).add(d).equal(),
      fontSize: e
    },
    [`${n}-with-icon ${n}-description`]: {
      marginInlineStart: i.calc(i.marginSM).add(d).equal(),
      fontSize: m
    },
    // Icon & color style in different selector level
    // https://github.com/ant-design/ant-design/issues/16503
    // https://github.com/ant-design/ant-design/issues/15512
    [`${n}-icon`]: {
      position: "absolute",
      fontSize: d,
      lineHeight: 1,
      // icon-font
      [`&-success${o}`]: {
        color: l
      },
      [`&-info${o}`]: {
        color: p
      },
      [`&-warning${o}`]: {
        color: s
      },
      [`&-error${o}`]: {
        color: f
      }
    },
    [`${n}-close`]: {
      position: "absolute",
      top: i.notificationPaddingVertical,
      insetInlineEnd: i.notificationPaddingHorizontal,
      color: i.colorIcon,
      outline: "none",
      width: i.notificationCloseButtonSize,
      height: i.notificationCloseButtonSize,
      borderRadius: i.borderRadiusSM,
      transition: `background-color ${i.motionDurationMid}, color ${i.motionDurationMid}`,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      "&:hover": {
        color: i.colorIconHover,
        backgroundColor: i.closeBtnHoverBg
      }
    },
    [`${n}-btn`]: {
      float: "right",
      marginTop: i.marginSM
    }
  };
}, P = (i) => {
  const {
    componentCls: o,
    // .ant-notification
    notificationMarginBottom: t,
    notificationMarginEdge: a,
    motionDurationMid: e,
    motionEaseInOut: r
  } = i, c = `${o}-notice`, l = new z("antNotificationFadeOut", {
    "0%": {
      maxHeight: i.animationMaxHeight,
      marginBottom: t
    },
    "100%": {
      maxHeight: 0,
      marginBottom: 0,
      paddingTop: 0,
      paddingBottom: 0,
      opacity: 0
    }
  });
  return [
    // ============================ Holder ============================
    {
      [o]: Object.assign(Object.assign({}, y(i)), {
        position: "fixed",
        zIndex: i.zIndexPopup,
        marginRight: {
          value: a,
          _skip_check_: !0
        },
        [`${o}-hook-holder`]: {
          position: "relative"
        },
        //  animation
        [`${o}-fade-appear-prepare`]: {
          opacity: "0 !important"
        },
        [`${o}-fade-enter, ${o}-fade-appear`]: {
          animationDuration: i.motionDurationMid,
          animationTimingFunction: r,
          animationFillMode: "both",
          opacity: 0,
          animationPlayState: "paused"
        },
        [`${o}-fade-leave`]: {
          animationTimingFunction: r,
          animationFillMode: "both",
          animationDuration: e,
          animationPlayState: "paused"
        },
        [`${o}-fade-enter${o}-fade-enter-active, ${o}-fade-appear${o}-fade-appear-active`]: {
          animationPlayState: "running"
        },
        [`${o}-fade-leave${o}-fade-leave-active`]: {
          animationName: l,
          animationPlayState: "running"
        },
        // RTL
        "&-rtl": {
          direction: "rtl",
          [`${c}-btn`]: {
            float: "left"
          }
        }
      })
    },
    // ============================ Notice ============================
    {
      [o]: {
        [`${c}-wrapper`]: Object.assign({}, w(i))
      }
    }
  ];
}, T = (i) => ({
  zIndexPopup: i.zIndexPopupBase + H + 50,
  width: 384,
  closeBtnHoverBg: i.wireframe ? "transparent" : i.colorFillContent
}), L = (i) => {
  const o = i.paddingMD, t = i.paddingLG;
  return v(i, {
    notificationBg: i.colorBgElevated,
    notificationPaddingVertical: o,
    notificationPaddingHorizontal: t,
    notificationIconSize: i.calc(i.fontSizeLG).mul(i.lineHeightLG).equal(),
    notificationCloseButtonSize: i.calc(i.controlHeightLG).mul(0.55).equal(),
    notificationMarginBottom: i.margin,
    notificationPadding: `${g(i.paddingMD)} ${g(i.paddingContentHorizontalLG)}`,
    notificationMarginEdge: i.marginLG,
    animationMaxHeight: 150,
    notificationStackLayer: 3
  });
}, Z = I("Notification", (i) => {
  const o = L(i);
  return [P(o), x(o), C(o)];
}, T);
export {
  Z as default,
  w as genNoticeStyle,
  T as prepareComponentToken,
  L as prepareNotificationToken
};
