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 w } 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 { genModalMaskStyle as I } from "../../modal/style/index.mjs";
import { textEllipsis as M } from "../../style/index.mjs";
import { initFadeMotion as h } from "../../style/motion/fade.mjs";
import { initZoomMotion as v } from "../../style/motion/zoom.mjs";
import { genStyleHooks as C } from "../../theme/util/genComponentStyleHook.mjs";
import { merge as u } from "../../theme/util/statistic.mjs";
import { TinyColor as n } from "../../../../@ctrl/tinycolor/dist/module/index.mjs";
const d = (e) => ({
  position: e || "absolute",
  inset: 0
}), x = (e) => {
  const {
    iconCls: i,
    motionDurationSlow: o,
    paddingXXS: r,
    marginXXS: t,
    prefixCls: a,
    colorTextLightSolid: l
  } = e;
  return {
    position: "absolute",
    inset: 0,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    color: l,
    background: new n("#000").setAlpha(0.5).toRgbString(),
    cursor: "pointer",
    opacity: 0,
    transition: `opacity ${o}`,
    [`.${a}-mask-info`]: Object.assign(Object.assign({}, M), {
      padding: `0 ${w(r)}`,
      [i]: {
        marginInlineEnd: t,
        svg: {
          verticalAlign: "baseline"
        }
      }
    })
  };
}, A = (e) => {
  const {
    previewCls: i,
    modalMaskBg: o,
    paddingSM: r,
    marginXL: t,
    margin: a,
    paddingLG: l,
    previewOperationColorDisabled: s,
    previewOperationHoverColor: g,
    motionDurationSlow: m,
    iconCls: p,
    colorTextLightSolid: S
  } = e, c = new n(o).setAlpha(0.1), b = c.clone().setAlpha(0.2);
  return {
    [`${i}-footer`]: {
      position: "fixed",
      bottom: t,
      left: {
        _skip_check_: !0,
        value: 0
      },
      width: "100%",
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      color: e.previewOperationColor
    },
    [`${i}-progress`]: {
      marginBottom: a
    },
    [`${i}-close`]: {
      position: "fixed",
      top: t,
      right: {
        _skip_check_: !0,
        value: t
      },
      display: "flex",
      color: S,
      backgroundColor: c.toRgbString(),
      borderRadius: "50%",
      padding: r,
      outline: 0,
      border: 0,
      cursor: "pointer",
      transition: `all ${m}`,
      "&:hover": {
        backgroundColor: b.toRgbString()
      },
      [`& > ${p}`]: {
        fontSize: e.previewOperationSize
      }
    },
    [`${i}-operations`]: {
      display: "flex",
      alignItems: "center",
      padding: `0 ${w(l)}`,
      backgroundColor: c.toRgbString(),
      borderRadius: 100,
      "&-operation": {
        marginInlineStart: r,
        padding: r,
        cursor: "pointer",
        transition: `all ${m}`,
        userSelect: "none",
        [`&:not(${i}-operations-operation-disabled):hover > ${p}`]: {
          color: g
        },
        "&-disabled": {
          color: s,
          cursor: "not-allowed"
        },
        "&:first-of-type": {
          marginInlineStart: 0
        },
        [`& > ${p}`]: {
          fontSize: e.previewOperationSize
        }
      }
    }
  };
}, f = (e) => {
  const {
    modalMaskBg: i,
    iconCls: o,
    previewOperationColorDisabled: r,
    previewCls: t,
    zIndexPopup: a,
    motionDurationSlow: l
  } = e, s = new n(i).setAlpha(0.1), g = s.clone().setAlpha(0.2);
  return {
    [`${t}-switch-left, ${t}-switch-right`]: {
      position: "fixed",
      insetBlockStart: "50%",
      zIndex: e.calc(a).add(1).equal({
        unit: !1
      }),
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      width: e.imagePreviewSwitchSize,
      height: e.imagePreviewSwitchSize,
      marginTop: e.calc(e.imagePreviewSwitchSize).mul(-1).div(2).equal(),
      color: e.previewOperationColor,
      background: s.toRgbString(),
      borderRadius: "50%",
      transform: "translateY(-50%)",
      cursor: "pointer",
      transition: `all ${l}`,
      userSelect: "none",
      "&:hover": {
        background: g.toRgbString()
      },
      "&-disabled": {
        "&, &:hover": {
          color: r,
          background: "transparent",
          cursor: "not-allowed",
          [`> ${o}`]: {
            cursor: "not-allowed"
          }
        }
      },
      [`> ${o}`]: {
        fontSize: e.previewOperationSize
      }
    },
    [`${t}-switch-left`]: {
      insetInlineStart: e.marginSM
    },
    [`${t}-switch-right`]: {
      insetInlineEnd: e.marginSM
    }
  };
}, $ = (e) => {
  const {
    motionEaseOut: i,
    previewCls: o,
    motionDurationSlow: r,
    componentCls: t
  } = e;
  return [
    {
      [`${t}-preview-root`]: {
        [o]: {
          height: "100%",
          textAlign: "center",
          pointerEvents: "none"
        },
        [`${o}-body`]: Object.assign(Object.assign({}, d()), {
          overflow: "hidden"
        }),
        [`${o}-img`]: {
          maxWidth: "100%",
          maxHeight: "70%",
          verticalAlign: "middle",
          transform: "scale3d(1, 1, 1)",
          cursor: "grab",
          transition: `transform ${r} ${i} 0s`,
          userSelect: "none",
          "&-wrapper": Object.assign(Object.assign({}, d()), {
            transition: `transform ${r} ${i} 0s`,
            // https://github.com/ant-design/ant-design/issues/39913
            // TailwindCSS will reset img default style.
            // Let's set back.
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            "& > *": {
              pointerEvents: "auto"
            },
            "&::before": {
              display: "inline-block",
              width: 1,
              height: "50%",
              marginInlineEnd: -1,
              content: '""'
            }
          })
        },
        [`${o}-moving`]: {
          [`${o}-preview-img`]: {
            cursor: "grabbing",
            "&-wrapper": {
              transitionDuration: "0s"
            }
          }
        }
      }
    },
    // Override
    {
      [`${t}-preview-root`]: {
        [`${o}-wrap`]: {
          zIndex: e.zIndexPopup
        }
      }
    },
    // Preview operations & switch
    {
      [`${t}-preview-operations-wrapper`]: {
        position: "fixed",
        zIndex: e.calc(e.zIndexPopup).add(1).equal({
          unit: !1
        })
      },
      "&": [A(e), f(e)]
    }
  ];
}, y = (e) => {
  const {
    componentCls: i
  } = e;
  return {
    // ============================== image ==============================
    [i]: {
      position: "relative",
      display: "inline-block",
      [`${i}-img`]: {
        width: "100%",
        height: "auto",
        verticalAlign: "middle"
      },
      [`${i}-img-placeholder`]: {
        backgroundColor: e.colorBgContainerDisabled,
        backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center center",
        backgroundSize: "30%"
      },
      [`${i}-mask`]: Object.assign({}, x(e)),
      [`${i}-mask:hover`]: {
        opacity: 1
      },
      [`${i}-placeholder`]: Object.assign({}, d())
    }
  };
}, j = (e) => {
  const {
    previewCls: i
  } = e;
  return {
    [`${i}-root`]: v(e, "zoom"),
    "&": h(e, !0)
  };
}, D = (e) => ({
  zIndexPopup: e.zIndexPopupBase + 80,
  previewOperationColor: new n(e.colorTextLightSolid).setAlpha(0.65).toRgbString(),
  previewOperationHoverColor: new n(e.colorTextLightSolid).setAlpha(0.85).toRgbString(),
  previewOperationColorDisabled: new n(e.colorTextLightSolid).setAlpha(0.25).toRgbString(),
  previewOperationSize: e.fontSizeIcon * 1.5
  // FIXME: fontSizeIconLG
}), J = C("Image", (e) => {
  const i = `${e.componentCls}-preview`, o = u(e, {
    previewCls: i,
    modalMaskBg: new n("#000").setAlpha(0.45).toRgbString(),
    // FIXME: Shared Token
    imagePreviewSwitchSize: e.controlHeightLG
  });
  return [y(o), $(o), I(u(o, {
    componentCls: i
  })), j(o)];
}, D);
export {
  J as default,
  d as genBoxStyle,
  x as genImageMaskStyle,
  $ as genImagePreviewStyle,
  A as genPreviewOperationsStyle,
  f as genPreviewSwitchStyle,
  D as prepareComponentToken
};
