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 B 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 { genStyleHooks as y } from "../../theme/util/genComponentStyleHook.mjs";
import { merge as f } from "../../theme/util/statistic.mjs";
const E = new B("ant-skeleton-loading", {
  "0%": {
    backgroundPosition: "100% 50%"
  },
  "100%": {
    backgroundPosition: "0 50%"
  }
}), g = (t) => ({
  height: t,
  lineHeight: w(t)
}), s = (t) => Object.assign({
  width: t
}, g(t)), I = (t) => ({
  background: t.skeletonLoadingBackground,
  backgroundSize: "400% 100%",
  animationName: E,
  animationDuration: t.skeletonLoadingMotionDuration,
  animationTimingFunction: "ease",
  animationIterationCount: "infinite"
}), d = (t, e) => Object.assign({
  width: e(t).mul(5).equal(),
  minWidth: e(t).mul(5).equal()
}, g(t)), M = (t) => {
  const {
    skeletonAvatarCls: e,
    gradientFromColor: n,
    controlHeight: o,
    controlHeightLG: i,
    controlHeightSM: l
  } = t;
  return {
    [`${e}`]: Object.assign({
      display: "inline-block",
      verticalAlign: "top",
      background: n
    }, s(o)),
    [`${e}${e}-circle`]: {
      borderRadius: "50%"
    },
    [`${e}${e}-lg`]: Object.assign({}, s(i)),
    [`${e}${e}-sm`]: Object.assign({}, s(l))
  };
}, A = (t) => {
  const {
    controlHeight: e,
    borderRadiusSM: n,
    skeletonInputCls: o,
    controlHeightLG: i,
    controlHeightSM: l,
    gradientFromColor: r,
    calc: a
  } = t;
  return {
    [`${o}`]: Object.assign({
      display: "inline-block",
      verticalAlign: "top",
      background: r,
      borderRadius: n
    }, d(e, a)),
    [`${o}-lg`]: Object.assign({}, d(i, a)),
    [`${o}-sm`]: Object.assign({}, d(l, a))
  };
}, h = (t) => Object.assign({
  width: t
}, g(t)), F = (t) => {
  const {
    skeletonImageCls: e,
    imageSizeBase: n,
    gradientFromColor: o,
    borderRadiusSM: i,
    calc: l
  } = t;
  return {
    [`${e}`]: Object.assign(Object.assign({
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      verticalAlign: "top",
      background: o,
      borderRadius: i
    }, h(l(n).mul(2).equal())), {
      [`${e}-path`]: {
        fill: "#bfbfbf"
      },
      [`${e}-svg`]: Object.assign(Object.assign({}, h(n)), {
        maxWidth: l(n).mul(4).equal(),
        maxHeight: l(n).mul(4).equal()
      }),
      [`${e}-svg${e}-svg-circle`]: {
        borderRadius: "50%"
      }
    }),
    [`${e}${e}-circle`]: {
      borderRadius: "50%"
    }
  };
}, m = (t, e, n) => {
  const {
    skeletonButtonCls: o
  } = t;
  return {
    [`${n}${o}-circle`]: {
      width: e,
      minWidth: e,
      borderRadius: "50%"
    },
    [`${n}${o}-round`]: {
      borderRadius: e
    }
  };
}, u = (t, e) => Object.assign({
  width: e(t).mul(2).equal(),
  minWidth: e(t).mul(2).equal()
}, g(t)), L = (t) => {
  const {
    borderRadiusSM: e,
    skeletonButtonCls: n,
    controlHeight: o,
    controlHeightLG: i,
    controlHeightSM: l,
    gradientFromColor: r,
    calc: a
  } = t;
  return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
    [`${n}`]: Object.assign({
      display: "inline-block",
      verticalAlign: "top",
      background: r,
      borderRadius: e,
      width: a(o).mul(2).equal(),
      minWidth: a(o).mul(2).equal()
    }, u(o, a))
  }, m(t, o, n)), {
    [`${n}-lg`]: Object.assign({}, u(i, a))
  }), m(t, i, `${n}-lg`)), {
    [`${n}-sm`]: Object.assign({}, u(l, a))
  }), m(t, l, `${n}-sm`));
}, T = (t) => {
  const {
    componentCls: e,
    skeletonAvatarCls: n,
    skeletonTitleCls: o,
    skeletonParagraphCls: i,
    skeletonButtonCls: l,
    skeletonInputCls: r,
    skeletonImageCls: a,
    controlHeight: p,
    controlHeightLG: k,
    controlHeightSM: b,
    gradientFromColor: c,
    padding: S,
    marginSM: C,
    borderRadius: j,
    titleHeight: O,
    blockRadius: $,
    paragraphLiHeight: H,
    controlHeightXS: R,
    paragraphMarginTop: v
  } = t;
  return {
    [`${e}`]: {
      display: "table",
      width: "100%",
      [`${e}-header`]: {
        display: "table-cell",
        paddingInlineEnd: S,
        verticalAlign: "top",
        // Avatar
        [`${n}`]: Object.assign({
          display: "inline-block",
          verticalAlign: "top",
          background: c
        }, s(p)),
        [`${n}-circle`]: {
          borderRadius: "50%"
        },
        [`${n}-lg`]: Object.assign({}, s(k)),
        [`${n}-sm`]: Object.assign({}, s(b))
      },
      [`${e}-content`]: {
        display: "table-cell",
        width: "100%",
        verticalAlign: "top",
        // Title
        [`${o}`]: {
          width: "100%",
          height: O,
          background: c,
          borderRadius: $,
          [`+ ${i}`]: {
            marginBlockStart: b
          }
        },
        // paragraph
        [`${i}`]: {
          padding: 0,
          "> li": {
            width: "100%",
            height: H,
            listStyle: "none",
            background: c,
            borderRadius: $,
            "+ li": {
              marginBlockStart: R
            }
          }
        },
        [`${i}> li:last-child:not(:first-child):not(:nth-child(2))`]: {
          width: "61%"
        }
      },
      [`&-round ${e}-content`]: {
        [`${o}, ${i} > li`]: {
          borderRadius: j
        }
      }
    },
    [`${e}-with-avatar ${e}-content`]: {
      // Title
      [`${o}`]: {
        marginBlockStart: C,
        [`+ ${i}`]: {
          marginBlockStart: v
        }
      }
    },
    // Skeleton element
    [`${e}${e}-element`]: Object.assign(Object.assign(Object.assign(Object.assign({
      display: "inline-block",
      width: "auto"
    }, L(t)), M(t)), A(t)), F(t)),
    // Skeleton Block Button, Input
    [`${e}${e}-block`]: {
      width: "100%",
      [`${l}`]: {
        width: "100%"
      },
      [`${r}`]: {
        width: "100%"
      }
    },
    // With active animation
    [`${e}${e}-active`]: {
      [`
        ${o},
        ${i} > li,
        ${n},
        ${l},
        ${r},
        ${a}
      `]: Object.assign({}, I(t))
    }
  };
}, q = (t) => {
  const {
    colorFillContent: e,
    colorFill: n
  } = t, o = e, i = n;
  return {
    color: o,
    colorGradientEnd: i,
    gradientFromColor: o,
    gradientToColor: i,
    titleHeight: t.controlHeight / 2,
    blockRadius: t.borderRadiusSM,
    paragraphMarginTop: t.marginLG + t.marginXXS,
    paragraphLiHeight: t.controlHeight / 2
  };
}, z = y("Skeleton", (t) => {
  const {
    componentCls: e,
    calc: n
  } = t, o = f(t, {
    skeletonAvatarCls: `${e}-avatar`,
    skeletonTitleCls: `${e}-title`,
    skeletonParagraphCls: `${e}-paragraph`,
    skeletonButtonCls: `${e}-button`,
    skeletonInputCls: `${e}-input`,
    skeletonImageCls: `${e}-image`,
    imageSizeBase: n(t.controlHeight).mul(1.5).equal(),
    borderRadius: 100,
    // Large number to make capsule shape
    skeletonLoadingBackground: `linear-gradient(90deg, ${t.gradientFromColor} 25%, ${t.gradientToColor} 37%, ${t.gradientFromColor} 63%)`,
    skeletonLoadingMotionDuration: "1.4s"
  });
  return [T(o)];
}, q, {
  deprecatedTokens: [["color", "gradientFromColor"], ["colorGradientEnd", "gradientToColor"]]
});
export {
  z as default,
  q as prepareComponentToken
};
