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 e } 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 n 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 { resetComponent as l } from "../../style/index.mjs";
import { genStyleHooks as s } from "../../theme/util/genComponentStyleHook.mjs";
import { merge as c } from "../../theme/util/statistic.mjs";
const t = (r) => {
  const i = r ? "100%" : "-100%";
  return new n(`antProgress${r ? "RTL" : "LTR"}Active`, {
    "0%": {
      transform: `translateX(${i}) scaleX(0)`,
      opacity: 0.1
    },
    "20%": {
      transform: `translateX(${i}) scaleX(0)`,
      opacity: 0.5
    },
    to: {
      transform: "translateX(0) scaleX(1)",
      opacity: 0
    }
  });
}, a = (r) => {
  const {
    componentCls: i,
    iconCls: o
  } = r;
  return {
    [i]: Object.assign(Object.assign({}, l(r)), {
      display: "inline-block",
      "&-rtl": {
        direction: "rtl"
      },
      "&-line": {
        position: "relative",
        width: "100%",
        fontSize: r.fontSize,
        marginInlineEnd: r.marginXS,
        marginBottom: r.marginXS
      },
      [`${i}-outer`]: {
        display: "inline-block",
        width: "100%"
      },
      [`&${i}-show-info`]: {
        [`${i}-outer`]: {
          marginInlineEnd: `calc(-2em - ${e(r.marginXS)})`,
          paddingInlineEnd: `calc(2em + ${e(r.paddingXS)})`
        }
      },
      [`${i}-inner`]: {
        position: "relative",
        display: "inline-block",
        width: "100%",
        overflow: "hidden",
        verticalAlign: "middle",
        backgroundColor: r.remainingColor,
        borderRadius: r.lineBorderRadius
      },
      [`${i}-inner:not(${i}-circle-gradient)`]: {
        [`${i}-circle-path`]: {
          stroke: r.defaultColor
        }
      },
      [`${i}-success-bg, ${i}-bg`]: {
        position: "relative",
        backgroundColor: r.defaultColor,
        borderRadius: r.lineBorderRadius,
        transition: `all ${r.motionDurationSlow} ${r.motionEaseInOutCirc}`
      },
      [`${i}-success-bg`]: {
        position: "absolute",
        insetBlockStart: 0,
        insetInlineStart: 0,
        backgroundColor: r.colorSuccess
      },
      [`${i}-text`]: {
        display: "inline-block",
        width: "2em",
        marginInlineStart: r.marginXS,
        color: r.colorText,
        lineHeight: 1,
        whiteSpace: "nowrap",
        textAlign: "start",
        verticalAlign: "middle",
        wordBreak: "normal",
        [o]: {
          fontSize: r.fontSize
        }
      },
      [`&${i}-status-active`]: {
        [`${i}-bg::before`]: {
          position: "absolute",
          inset: 0,
          backgroundColor: r.colorBgContainer,
          borderRadius: r.lineBorderRadius,
          opacity: 0,
          animationName: t(),
          animationDuration: r.progressActiveMotionDuration,
          animationTimingFunction: r.motionEaseOutQuint,
          animationIterationCount: "infinite",
          content: '""'
        }
      },
      [`&${i}-rtl${i}-status-active`]: {
        [`${i}-bg::before`]: {
          animationName: t(!0)
        }
      },
      [`&${i}-status-exception`]: {
        [`${i}-bg`]: {
          backgroundColor: r.colorError
        },
        [`${i}-text`]: {
          color: r.colorError
        }
      },
      [`&${i}-status-exception ${i}-inner:not(${i}-circle-gradient)`]: {
        [`${i}-circle-path`]: {
          stroke: r.colorError
        }
      },
      [`&${i}-status-success`]: {
        [`${i}-bg`]: {
          backgroundColor: r.colorSuccess
        },
        [`${i}-text`]: {
          color: r.colorSuccess
        }
      },
      [`&${i}-status-success ${i}-inner:not(${i}-circle-gradient)`]: {
        [`${i}-circle-path`]: {
          stroke: r.colorSuccess
        }
      }
    })
  };
}, m = (r) => {
  const {
    componentCls: i,
    iconCls: o
  } = r;
  return {
    [i]: {
      [`${i}-circle-trail`]: {
        stroke: r.remainingColor
      },
      [`&${i}-circle ${i}-inner`]: {
        position: "relative",
        lineHeight: 1,
        backgroundColor: "transparent"
      },
      [`&${i}-circle ${i}-text`]: {
        position: "absolute",
        insetBlockStart: "50%",
        insetInlineStart: 0,
        width: "100%",
        margin: 0,
        padding: 0,
        color: r.circleTextColor,
        fontSize: r.circleTextFontSize,
        lineHeight: 1,
        whiteSpace: "normal",
        textAlign: "center",
        transform: "translateY(-50%)",
        [o]: {
          fontSize: r.circleIconFontSize
        }
      },
      [`${i}-circle&-status-exception`]: {
        [`${i}-text`]: {
          color: r.colorError
        }
      },
      [`${i}-circle&-status-success`]: {
        [`${i}-text`]: {
          color: r.colorSuccess
        }
      }
    },
    [`${i}-inline-circle`]: {
      lineHeight: 1,
      [`${i}-inner`]: {
        verticalAlign: "bottom"
      }
    }
  };
}, g = (r) => {
  const {
    componentCls: i
  } = r;
  return {
    [i]: {
      [`${i}-steps`]: {
        display: "inline-block",
        "&-outer": {
          display: "flex",
          flexDirection: "row",
          alignItems: "center"
        },
        "&-item": {
          flexShrink: 0,
          minWidth: r.progressStepMinWidth,
          marginInlineEnd: r.progressStepMarginInlineEnd,
          backgroundColor: r.remainingColor,
          transition: `all ${r.motionDurationSlow}`,
          "&-active": {
            backgroundColor: r.defaultColor
          }
        }
      }
    }
  };
}, p = (r) => {
  const {
    componentCls: i,
    iconCls: o
  } = r;
  return {
    [i]: {
      [`${i}-small&-line, ${i}-small&-line ${i}-text ${o}`]: {
        fontSize: r.fontSizeSM
      }
    }
  };
}, d = (r) => ({
  circleTextColor: r.colorText,
  defaultColor: r.colorInfo,
  remainingColor: r.colorFillSecondary,
  lineBorderRadius: 100,
  // magic for capsule shape, should be a very large number
  circleTextFontSize: "1em",
  circleIconFontSize: `${r.fontSize / r.fontSizeSM}em`
}), A = s("Progress", (r) => {
  const i = r.calc(r.marginXXS).div(2).equal(), o = c(r, {
    progressStepMarginInlineEnd: i,
    progressStepMinWidth: i,
    progressActiveMotionDuration: "2.4s"
  });
  return [a(o), m(o), g(o), p(o)];
}, d);
export {
  A as default,
  d as prepareComponentToken
};
