ant-design-x-vue-next/es/think/style/index.mjs

Ant Design X for Vue — community continuation aligned with @ant-design/x

import "../../_util/cssinjs/StyleContext.mjs";
import "vue";
import "../../_util/cssinjs/theme/ThemeCache.mjs";
import "../../_util/warning.mjs";
import k from "../../_util/cssinjs/Keyframes.mjs";
import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
import { merge as f } from "../../_util/cssinjs-utils/util/statistic.mjs";
import { genStyleHooks as b } from "../../theme/genStyleUtils.mjs";
import "../../transition-collapse/index.mjs";
import { genTransitionCollapseStyle as S } from "../../transition-collapse/style/index.mjs";
const e = new k("antXBlink", {
  "0%": {
    backgroundPositionX: "-200%",
    backgroundPositionY: "100%"
  },
  "25%": {
    backgroundPositionX: "-100%",
    backgroundPositionY: "100%"
  },
  "50%": {
    backgroundPositionX: "0%",
    backgroundPositionY: "100%"
  },
  "75%": {
    backgroundPositionX: "100%",
    backgroundPositionY: "100%"
  },
  "100%": {
    backgroundPositionX: "200%",
    backgroundPositionY: "100%"
  }
}), x = (n) => {
  const {
    componentCls: o,
    paddingXS: t,
    paddingSM: a,
    marginSM: l,
    colorTextSecondary: c,
    colorTextDescription: s,
    fontSize: i,
    fontSizeHeading5: d,
    fontSizeSM: p,
    lineHeight: r,
    colorBorder: m,
    lineWidth: u,
    calc: g
  } = n;
  return {
    [o]: {
      [`${o}-status-wrapper`]: {
        width: "fit-content",
        display: "flex",
        flexDirection: "row",
        gap: t,
        alignItems: "center",
        fontSize: i,
        color: c,
        lineHeight: r,
        cursor: "pointer"
      },
      [`${o}-status-icon`]: {
        fontSize: d,
        display: "flex"
      },
      [`${o}-status-text`]: {
        lineHeight: r,
        fontSize: i
      },
      [`${o}-status-down-icon`]: {
        fontSize: p,
        svg: {
          transition: `all ${n.motionDurationMid} ${n.motionEaseInOut}`
        }
      },
      [`${o}-content`]: {
        marginTop: l,
        width: "100%",
        color: s,
        paddingInlineStart: a,
        borderInlineStart: `${g(u).mul(2).equal()} solid ${m}`
      },
      [`${o}-motion-blink`]: {
        backgroundClip: "text",
        color: n.colorTextBlinkDefault,
        WebkitBackgroundClip: "text",
        backgroundImage: `linear-gradient(90deg,transparent,${n.colorTextBlink},transparent)`,
        animationDuration: "1s",
        animationIterationCount: "infinite",
        animationTimingFunction: "linear",
        animationFillMode: "forwards",
        backgroundSize: "50%",
        backgroundRepeat: "no-repeat",
        animationName: e
      },
      [`&${o}-rtl`]: {
        direction: "rtl"
      }
    }
  };
}, T = (n) => {
  const { colorTextDescription: o, colorTextBase: t } = n;
  return {
    colorTextBlinkDefault: o,
    colorTextBlink: t
  };
}, I = b(
  "Think",
  (n) => {
    const o = f(n, {});
    return [
      e,
      x(o),
      S(o)
    ];
  },
  T
);
export {
  I as default,
  T as prepareComponentToken
};