ant-design-x-vue/es/sender/style/index.mjs

Craft AI-driven interfaces effortlessly

import "../../_util/cssinjs/StyleContext.mjs";
import "vue";
import { unit as p } from "../../_util/cssinjs/util.mjs";
import "../../_util/cssinjs/theme/ThemeCache.mjs";
import "../../_util/warning.mjs";
import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
import { merge as c } from "../../_util/cssinjs-utils/util/statistic.mjs";
import { genStyleHooks as g } from "../../theme/genStyleUtils.mjs";
import "../../transition-collapse/index.mjs";
import s from "./header.mjs";
import { genTransitionCollapseStyle as b } from "../../transition-collapse/style/index.mjs";
const S = (o) => {
  const {
    componentCls: i,
    padding: e,
    paddingSM: r,
    paddingXS: n,
    paddingXXS: d,
    lineWidth: t,
    lineWidthBold: a,
    calc: l
  } = o;
  return {
    [i]: {
      position: "relative",
      width: "100%",
      boxSizing: "border-box",
      boxShadow: `${o.boxShadowTertiary}`,
      transition: `background ${o.motionDurationSlow}`,
      // Border
      borderRadius: {
        _skip_check_: !0,
        value: l(o.borderRadius).mul(2).equal()
      },
      borderColor: o.colorBorder,
      borderWidth: 0,
      borderStyle: "solid",
      // Border
      "&:after": {
        content: '""',
        position: "absolute",
        inset: 0,
        pointerEvents: "none",
        transition: `border-color ${o.motionDurationSlow}`,
        borderRadius: {
          _skip_check_: !0,
          value: "inherit"
        },
        borderStyle: "inherit",
        borderColor: "inherit",
        borderWidth: t
      },
      // Focus
      "&:focus-within": {
        boxShadow: `${o.boxShadowSecondary}`,
        borderColor: o.colorPrimary,
        "&:after": {
          borderWidth: a
        }
      },
      "&-disabled": {
        background: o.colorBgContainerDisabled
      },
      // ============================== RTL ==============================
      [`&${i}-rtl`]: {
        direction: "rtl"
      },
      // ============================ Content ============================
      [`${i}-content`]: {
        display: "flex",
        gap: n,
        width: "100%",
        paddingBlock: r,
        paddingInlineStart: e,
        paddingInlineEnd: r,
        boxSizing: "border-box",
        alignItems: "flex-end"
      },
      // ============================ Prefix =============================
      [`${i}-prefix`]: {
        flex: "none"
      },
      // ============================= Input =============================
      [`${i}-input`]: {
        padding: 0,
        borderRadius: 0,
        flex: "auto",
        alignSelf: "center",
        minHeight: "auto"
      },
      // ============================ Actions ============================
      [`${i}-actions-list`]: {
        flex: "none",
        display: "flex",
        "&-presets": {
          gap: o.paddingXS
        }
      },
      [`${i}-actions-btn`]: {
        "&-disabled": {
          opacity: 0.45
        },
        "&-loading-button": {
          padding: 0,
          border: 0
        },
        "&-loading-icon": {
          height: o.controlHeight,
          width: o.controlHeight,
          verticalAlign: "top"
        },
        "&-recording-icon": {
          height: "1.2em",
          width: "1.2em",
          verticalAlign: "top"
        }
      },
      // ============================ Footer =============================
      [`${i}-footer`]: {
        paddingInlineStart: e,
        paddingInlineEnd: r,
        paddingBlockEnd: r,
        paddingBlockStart: d,
        boxSizing: "border-box"
      }
    }
  };
}, h = () => ({}), _ = g(
  "Sender",
  (o) => {
    const { paddingXS: i, calc: e } = o, r = c(o, {
      SenderContentMaxWidth: `calc(100% - ${p(
        e(i).add(32).equal()
      )})`
    });
    return [
      S(r),
      s(r),
      b(r)
    ];
  },
  h
);
export {
  _ as default,
  h as prepareComponentToken
};