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

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

import "../../_util/cssinjs/StyleContext.mjs";
import "vue";
import { unit as g } from "../../_util/cssinjs/util.mjs";
import "../../_util/cssinjs/theme/ThemeCache.mjs";
import "../../_util/warning.mjs";
import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
import { merge as s } from "../../_util/cssinjs-utils/util/statistic.mjs";
import { q as i } from "../../chunks/module-chunk.mjs";
import { genStyleHooks as p } from "../../theme/genStyleUtils.mjs";
import "../../transition-collapse/index.mjs";
import S from "./header.mjs";
import b from "./switch.mjs";
import m from "./slot-textarea.mjs";
import { genTransitionCollapseStyle as h } from "../../transition-collapse/style/index.mjs";
const u = (o) => {
  const {
    componentCls: r,
    padding: e,
    paddingSM: t,
    paddingXS: n,
    paddingXXS: d,
    lineWidth: l,
    lineWidthBold: a,
    calc: c
  } = o;
  return {
    [r]: {
      position: "relative",
      width: "100%",
      boxSizing: "border-box",
      boxShadow: `${o.boxShadowTertiary}`,
      transition: `background ${o.motionDurationSlow}`,
      // Border
      borderRadius: {
        _skip_check_: !0,
        value: c(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: l
      },
      // Focus
      "&:focus-within": {
        boxShadow: `${o.boxShadowSecondary}`,
        borderColor: o.colorPrimary,
        "&:after": {
          borderWidth: a
        }
      },
      "&-disabled": {
        background: o.colorBgContainerDisabled
      },
      // ============================== RTL ==============================
      [`&${r}-rtl`]: {
        direction: "rtl"
      },
      // ============================ Content ============================
      [`${r}-content`]: {
        display: "flex",
        gap: n,
        width: "100%",
        paddingBlock: t,
        paddingInlineStart: e,
        paddingInlineEnd: t,
        boxSizing: "border-box",
        alignItems: "flex-end"
      },
      // ============================ Prefix =============================
      [`${r}-prefix`]: {
        flex: "none"
      },
      // ============================= Input =============================
      [`${r}-input`]: {
        padding: 0,
        borderRadius: 0,
        flex: "auto",
        alignSelf: "center",
        minHeight: "auto"
      },
      // ============================ Actions ============================
      [`${r}-actions-list`]: {
        flex: "none",
        display: "flex",
        "&-presets": {
          gap: o.paddingXS
        }
      },
      [`${r}-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 =============================
      [`${r}-footer`]: {
        paddingInlineStart: e,
        paddingInlineEnd: t,
        paddingBlockEnd: t,
        paddingBlockStart: d,
        boxSizing: "border-box"
      }
    }
  };
}, x = (o) => {
  const { colorPrimary: r } = o, e = new i(r).setA(0.06).toRgbString(), t = new i(r).setA(0.08).toRgbString(), n = new i(r).setA(0.15).toRgbString(), d = r, l = new i(r).setA(0.25).toRgbString(), a = new i(r).setA(0.1).toRgbString();
  return {
    colorBgSlot: e,
    colorBgSkill: t,
    colorBgSkillHover: n,
    colorTextSlot: d,
    colorTextSlotPlaceholder: l,
    colorBorderSlotHover: a,
    colorBorderSlot: e
  };
}, X = p(
  "Sender",
  (o) => {
    const { paddingXS: r, calc: e } = o, t = s(o, {
      SenderContentMaxWidth: `calc(100% - ${g(
        e(r).add(32).equal()
      )})`
    });
    return [
      u(t),
      S(t),
      b(t),
      m(t),
      h(t)
    ];
  },
  x
);
export {
  X as default,
  x as prepareComponentToken
};