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 e } 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 "../../../../@ant-design/cssinjs/es/theme/createTheme.mjs";
import "../../../../@ant-design/cssinjs/es/theme/ThemeCache.mjs";
import "../../../../@ant-design/cssinjs/es/transformers/legacyLogicalProperties.mjs";
import { resetComponent as d, textEllipsis as m } from "../../style/index.mjs";
import { genStyleHooks as g } from "../../theme/util/genComponentStyleHook.mjs";
import { merge as p } from "../../theme/util/statistic.mjs";
const c = (t) => {
  const {
    componentCls: i,
    labelBg: o
  } = t;
  return {
    [`&${i}-bordered`]: {
      [`> ${i}-view`]: {
        border: `${e(t.lineWidth)} ${t.lineType} ${t.colorSplit}`,
        "> table": {
          tableLayout: "auto",
          borderCollapse: "collapse"
        },
        [`${i}-row`]: {
          borderBottom: `${e(t.lineWidth)} ${t.lineType} ${t.colorSplit}`,
          "&:last-child": {
            borderBottom: "none"
          },
          [`> ${i}-item-label, > ${i}-item-content`]: {
            padding: `${e(t.padding)} ${e(t.paddingLG)}`,
            borderInlineEnd: `${e(t.lineWidth)} ${t.lineType} ${t.colorSplit}`,
            "&:last-child": {
              borderInlineEnd: "none"
            }
          },
          [`> ${i}-item-label`]: {
            color: t.colorTextSecondary,
            backgroundColor: o,
            "&::after": {
              display: "none"
            }
          }
        }
      },
      [`&${i}-middle`]: {
        [`${i}-row`]: {
          [`> ${i}-item-label, > ${i}-item-content`]: {
            padding: `${e(t.paddingSM)} ${e(t.paddingLG)}`
          }
        }
      },
      [`&${i}-small`]: {
        [`${i}-row`]: {
          [`> ${i}-item-label, > ${i}-item-content`]: {
            padding: `${e(t.paddingXS)} ${e(t.padding)}`
          }
        }
      }
    }
  };
}, s = (t) => {
  const {
    componentCls: i,
    extraColor: o,
    itemPaddingBottom: l,
    colonMarginRight: r,
    colonMarginLeft: n,
    titleMarginBottom: a
  } = t;
  return {
    [i]: Object.assign(Object.assign(Object.assign({}, d(t)), c(t)), {
      "&-rtl": {
        direction: "rtl"
      },
      [`${i}-header`]: {
        display: "flex",
        alignItems: "center",
        marginBottom: a
      },
      [`${i}-title`]: Object.assign(Object.assign({}, m), {
        flex: "auto",
        color: t.titleColor,
        fontWeight: t.fontWeightStrong,
        fontSize: t.fontSizeLG,
        lineHeight: t.lineHeightLG
      }),
      [`${i}-extra`]: {
        marginInlineStart: "auto",
        color: o,
        fontSize: t.fontSize
      },
      [`${i}-view`]: {
        width: "100%",
        borderRadius: t.borderRadiusLG,
        table: {
          width: "100%",
          tableLayout: "fixed"
        }
      },
      [`${i}-row`]: {
        "> th, > td": {
          paddingBottom: l
        },
        "&:last-child": {
          borderBottom: "none"
        }
      },
      [`${i}-item-label`]: {
        color: t.colorTextTertiary,
        fontWeight: "normal",
        fontSize: t.fontSize,
        lineHeight: t.lineHeight,
        textAlign: "start",
        "&::after": {
          content: '":"',
          position: "relative",
          top: -0.5,
          // magic for position
          marginInline: `${e(n)} ${e(r)}`
        },
        [`&${i}-item-no-colon::after`]: {
          content: '""'
        }
      },
      [`${i}-item-no-label`]: {
        "&::after": {
          margin: 0,
          content: '""'
        }
      },
      [`${i}-item-content`]: {
        display: "table-cell",
        flex: 1,
        color: t.contentColor,
        fontSize: t.fontSize,
        lineHeight: t.lineHeight,
        wordBreak: "break-word",
        overflowWrap: "break-word"
      },
      [`${i}-item`]: {
        paddingBottom: 0,
        verticalAlign: "top",
        "&-container": {
          display: "flex",
          [`${i}-item-label`]: {
            display: "inline-flex",
            alignItems: "baseline"
          },
          [`${i}-item-content`]: {
            display: "inline-flex",
            alignItems: "baseline"
          }
        }
      },
      "&-middle": {
        [`${i}-row`]: {
          "> th, > td": {
            paddingBottom: t.paddingSM
          }
        }
      },
      "&-small": {
        [`${i}-row`]: {
          "> th, > td": {
            paddingBottom: t.paddingXS
          }
        }
      }
    })
  };
}, $ = (t) => ({
  labelBg: t.colorFillAlter,
  titleColor: t.colorText,
  titleMarginBottom: t.fontSizeSM * t.lineHeightSM,
  itemPaddingBottom: t.padding,
  colonMarginRight: t.marginXS,
  colonMarginLeft: t.marginXXS / 2,
  contentColor: t.colorText,
  extraColor: t.colorText
}), I = g("Descriptions", (t) => {
  const i = p(t, {});
  return s(i);
}, $);
export {
  I as default,
  $ as prepareComponentToken
};
