ant-design-x-vue-next/es/thought-chain/style/item.mjs

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

import "../../_util/cssinjs/StyleContext.mjs";
import "vue";
import { unit as d } from "../../_util/cssinjs/util.mjs";
import "../../_util/cssinjs/theme/ThemeCache.mjs";
import "../../_util/warning.mjs";
import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
const $ = (r) => {
  const { componentCls: i, calc: l } = r, o = `${i}-item`;
  return {
    [`${i}${o}`]: {
      display: "inline-flex",
      gap: d(l(r.marginXXS).add(1).equal()),
      whiteSpace: "normal",
      wordBreak: "break-word",
      fontSize: r.fontSize,
      color: r.colorText,
      paddingBlock: d(l(r.paddingXXS).add(1).equal()),
      paddingInline: r.paddingSM,
      boxSizing: "border-box",
      lineHeight: r.lineHeight,
      borderRadius: r.itemBorderRadius,
      alignItems: "baseline",
      [`&${o}-rtl`]: {
        direction: "rtl"
      },
      [`&${o}-click:not(${o}-disabled)`]: {
        cursor: "pointer",
        transition: `all ${r.motionDurationMid} ${r.motionEaseInOut}`
      },
      [`&${o}-disabled`]: {
        cursor: "not-allowed"
      },
      [`${i}-motion-blink`]: {
        [`${o}-description`]: {
          color: r.itemMotionDescription
        }
      },
      [`${i}-status-success`]: {
        color: r.colorSuccess
      },
      [`${i}-status-loading`]: {
        color: r.colorPrimary
      },
      [`${o}-title`]: {
        display: "inline-block",
        whiteSpace: "nowrap"
      },
      [`${o}-title-with-description`]: {
        marginInlineEnd: r.marginXS
      },
      [`${o}-description`]: {
        color: r.colorTextDescription,
        display: "inline-block",
        whiteSpace: "break-spaces"
      },
      [`&${o}-disabled:not(${o}-error)`]: {
        color: r.colorTitleDisabled,
        [`${o}-description`]: {
          color: r.colorDescriptionDisabled
        },
        [`${i}-status-success`]: {
          color: r.colorSuccessDisabled
        },
        [`${i}-status-loading`]: {
          color: r.colorPrimaryDisabled
        }
      },
      [`&${o}-solid`]: {
        background: r.itemSolidBg,
        [`&${o}-disabled`]: {
          background: r.colorBgContainerDisabled
        },
        [`&${o}-click:not(${o}-error):hover`]: {
          background: r.itemSolidHoverBg
        },
        [`&${o}-error:not(${o}-disabled)`]: {
          background: r.colorErrorBg
        },
        [`&${o}-error:where(${o}-disabled)`]: {
          background: r.colorErrorBgDisabled
        }
      },
      [`&${o}-outlined`]: {
        paddingBlock: r.paddingXXS,
        backgroundColor: r.itemOutlinedBg,
        borderWidth: r.lineWidth,
        borderStyle: r.lineType,
        borderColor: r.colorBorder,
        [`&${o}-error:not(${o}-disabled)`]: {
          borderColor: r.colorErrorBorder,
          background: r.colorErrorBg
        },
        [`&${o}-error:where(${o}-disabled)`]: {
          borderColor: r.colorErrorBorder,
          background: r.colorErrorBgDisabled
        },
        [`&${o}-click:not(${o}-error):hover`]: {
          background: r.itemOutlinedHoverBg
        }
      },
      [`&${o}-text`]: {
        [`&${o}-click:not(${o}-error):hover`]: {
          background: r.itemSolidHoverBg
        }
      },
      [`&${o}-error`]: {
        [`&:not(${o}-disabled)`]: {
          color: r.colorErrorText,
          [`${o}-description`]: {
            color: r.colorErrorTextDescription
          }
        },
        [`&:where(${o}-disabled)`]: {
          color: r.colorErrorTextDisabled,
          [`${o}-description`]: {
            color: r.colorErrorTextDescriptionDisabled
          }
        },
        [`&${o}-click:hover`]: {
          background: r.colorErrorBgHover
        }
      }
    }
  };
};
export {
  $ as default
};