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 "../../../../@ant-design/cssinjs/es/theme/createTheme.mjs";
import "../../../../rc-util/es/warning.mjs";
import "../../../../@ant-design/cssinjs/es/theme/ThemeCache.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 n from "../../../../@ant-design/cssinjs/es/Keyframes.mjs";
import "../../../../@ant-design/cssinjs/es/transformers/legacyLogicalProperties.mjs";
import { resetComponent as e } from "../../style/index.mjs";
import { genStyleHooks as a } from "../../theme/util/genComponentStyleHook.mjs";
import { merge as r } from "../../theme/util/statistic.mjs";
const l = new n("antSpinMove", {
  to: {
    opacity: 1
  }
}), d = new n("antRotate", {
  to: {
    transform: "rotate(405deg)"
  }
}), s = (i) => {
  const {
    componentCls: t,
    calc: o
  } = i;
  return {
    [`${t}`]: Object.assign(Object.assign({}, e(i)), {
      position: "absolute",
      display: "none",
      color: i.colorPrimary,
      fontSize: 0,
      textAlign: "center",
      verticalAlign: "middle",
      opacity: 0,
      transition: `transform ${i.motionDurationSlow} ${i.motionEaseInOutCirc}`,
      "&-spinning": {
        position: "static",
        display: "inline-block",
        opacity: 1
      },
      [`${t}-text`]: {
        fontSize: i.fontSize,
        paddingTop: o(o(i.dotSize).sub(i.fontSize)).div(2).add(2).equal()
      },
      "&-fullscreen": {
        position: "fixed",
        width: "100vw",
        height: "100vh",
        backgroundColor: i.colorBgMask,
        zIndex: i.zIndexPopupBase,
        inset: 0,
        display: "flex",
        alignItems: "center",
        flexDirection: "column",
        justifyContent: "center",
        opacity: 0,
        visibility: "hidden",
        transition: `all ${i.motionDurationMid}`,
        "&-show": {
          opacity: 1,
          visibility: "visible"
        },
        [`${t}-dot ${t}-dot-item`]: {
          backgroundColor: i.colorWhite
        },
        [`${t}-text`]: {
          color: i.colorTextLightSolid
        }
      },
      "&-nested-loading": {
        position: "relative",
        [`> div > ${t}`]: {
          position: "absolute",
          top: 0,
          insetInlineStart: 0,
          zIndex: 4,
          display: "block",
          width: "100%",
          height: "100%",
          maxHeight: i.contentHeight,
          [`${t}-dot`]: {
            position: "absolute",
            top: "50%",
            insetInlineStart: "50%",
            margin: o(i.dotSize).mul(-1).div(2).equal()
          },
          [`${t}-text`]: {
            position: "absolute",
            top: "50%",
            width: "100%",
            textShadow: `0 1px 2px ${i.colorBgContainer}`
            // FIXME: shadow
          },
          [`&${t}-show-text ${t}-dot`]: {
            marginTop: o(i.dotSize).div(2).mul(-1).sub(10).equal()
          },
          "&-sm": {
            [`${t}-dot`]: {
              margin: o(i.dotSizeSM).mul(-1).div(2).equal()
            },
            [`${t}-text`]: {
              paddingTop: o(o(i.dotSizeSM).sub(i.fontSize)).div(2).add(2).equal()
            },
            [`&${t}-show-text ${t}-dot`]: {
              marginTop: o(i.dotSizeSM).div(2).mul(-1).sub(10).equal()
            }
          },
          "&-lg": {
            [`${t}-dot`]: {
              margin: o(i.dotSizeLG).mul(-1).div(2).equal()
            },
            [`${t}-text`]: {
              paddingTop: o(o(i.dotSizeLG).sub(i.fontSize)).div(2).add(2).equal()
            },
            [`&${t}-show-text ${t}-dot`]: {
              marginTop: o(i.dotSizeLG).div(2).mul(-1).sub(10).equal()
            }
          }
        },
        [`${t}-container`]: {
          position: "relative",
          transition: `opacity ${i.motionDurationSlow}`,
          "&::after": {
            position: "absolute",
            top: 0,
            insetInlineEnd: 0,
            bottom: 0,
            insetInlineStart: 0,
            zIndex: 10,
            width: "100%",
            height: "100%",
            background: i.colorBgContainer,
            opacity: 0,
            transition: `all ${i.motionDurationSlow}`,
            content: '""',
            pointerEvents: "none"
          }
        },
        [`${t}-blur`]: {
          clear: "both",
          opacity: 0.5,
          userSelect: "none",
          pointerEvents: "none",
          "&::after": {
            opacity: 0.4,
            pointerEvents: "auto"
          }
        }
      },
      // tip
      // ------------------------------
      "&-tip": {
        color: i.spinDotDefault
      },
      // dots
      // ------------------------------
      [`${t}-dot`]: {
        position: "relative",
        display: "inline-block",
        fontSize: i.dotSize,
        width: "1em",
        height: "1em",
        "&-item": {
          position: "absolute",
          display: "block",
          width: o(i.dotSize).sub(o(i.marginXXS).div(2)).div(2).equal(),
          height: o(i.dotSize).sub(o(i.marginXXS).div(2)).div(2).equal(),
          backgroundColor: i.colorPrimary,
          borderRadius: "100%",
          transform: "scale(0.75)",
          transformOrigin: "50% 50%",
          opacity: 0.3,
          animationName: l,
          animationDuration: "1s",
          animationIterationCount: "infinite",
          animationTimingFunction: "linear",
          animationDirection: "alternate",
          "&:nth-child(1)": {
            top: 0,
            insetInlineStart: 0,
            animationDelay: "0s"
          },
          "&:nth-child(2)": {
            top: 0,
            insetInlineEnd: 0,
            animationDelay: "0.4s"
          },
          "&:nth-child(3)": {
            insetInlineEnd: 0,
            bottom: 0,
            animationDelay: "0.8s"
          },
          "&:nth-child(4)": {
            bottom: 0,
            insetInlineStart: 0,
            animationDelay: "1.2s"
          }
        },
        "&-spin": {
          transform: "rotate(45deg)",
          animationName: d,
          animationDuration: "1.2s",
          animationIterationCount: "infinite",
          animationTimingFunction: "linear"
        }
      },
      // small
      [`&-sm ${t}-dot`]: {
        fontSize: i.dotSizeSM,
        i: {
          width: o(o(i.dotSizeSM).sub(o(i.marginXXS).div(2))).div(2).equal(),
          height: o(o(i.dotSizeSM).sub(o(i.marginXXS).div(2))).div(2).equal()
        }
      },
      // large
      [`&-lg ${t}-dot`]: {
        fontSize: i.dotSizeLG,
        i: {
          width: o(o(i.dotSizeLG).sub(i.marginXXS)).div(2).equal(),
          height: o(o(i.dotSizeLG).sub(i.marginXXS)).div(2).equal()
        }
      },
      [`&${t}-show-text ${t}-text`]: {
        display: "block"
      }
    })
  };
}, m = (i) => {
  const {
    controlHeightLG: t,
    controlHeight: o
  } = i;
  return {
    contentHeight: 400,
    dotSize: t / 2,
    dotSizeSM: t * 0.35,
    dotSizeLG: o
  };
}, I = a("Spin", (i) => {
  const t = r(i, {
    spinDotDefault: i.colorTextDescription
  });
  return [s(t)];
}, m);
export {
  I as default,
  m as prepareComponentToken
};
