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 n } 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 c } from "../../style/index.mjs";
import { zoomIn as s } from "../../style/motion/zoom.mjs";
import h from "../../style/motion/collapse.mjs";
import { genStyleHooks as x } from "../../theme/util/genComponentStyleHook.mjs";
import { merge as u } from "../../theme/util/statistic.mjs";
import S from "./explain.mjs";
const y = (i) => ({
  legend: {
    display: "block",
    width: "100%",
    marginBottom: i.marginLG,
    padding: 0,
    color: i.colorTextDescription,
    fontSize: i.fontSizeLG,
    lineHeight: "inherit",
    border: 0,
    borderBottom: `${n(i.lineWidth)} ${i.lineType} ${i.colorBorder}`
  },
  label: {
    fontSize: i.fontSize
  },
  'input[type="search"]': {
    boxSizing: "border-box"
  },
  // Position radios and checkboxes better
  'input[type="radio"], input[type="checkbox"]': {
    lineHeight: "normal"
  },
  'input[type="file"]': {
    display: "block"
  },
  // Make range inputs behave like textual form controls
  'input[type="range"]': {
    display: "block",
    width: "100%"
  },
  // Make multiple select elements height not fixed
  "select[multiple], select[size]": {
    height: "auto"
  },
  // Focus for file, radio, and checkbox
  "input[type='file']:focus,\n  input[type='radio']:focus,\n  input[type='checkbox']:focus": {
    outline: 0,
    boxShadow: `0 0 0 ${n(i.controlOutlineWidth)} ${i.controlOutline}`
  },
  // Adjust output element
  output: {
    display: "block",
    paddingTop: 15,
    color: i.colorText,
    fontSize: i.fontSize,
    lineHeight: i.lineHeight
  }
}), a = (i, l) => {
  const {
    formItemCls: o
  } = i;
  return {
    [o]: {
      [`${o}-label > label`]: {
        height: l
      },
      [`${o}-control-input`]: {
        minHeight: l
      }
    }
  };
}, w = (i) => {
  const {
    componentCls: l
  } = i;
  return {
    [i.componentCls]: Object.assign(Object.assign(Object.assign({}, c(i)), y(i)), {
      [`${l}-text`]: {
        display: "inline-block",
        paddingInlineEnd: i.paddingSM
      },
      // ================================================================
      // =                             Size                             =
      // ================================================================
      "&-small": Object.assign({}, a(i, i.controlHeightSM)),
      "&-large": Object.assign({}, a(i, i.controlHeightLG))
    })
  };
}, C = (i) => {
  const {
    formItemCls: l,
    iconCls: o,
    componentCls: e,
    rootPrefixCls: t,
    labelRequiredMarkColor: m,
    labelColor: p,
    labelFontSize: g,
    labelHeight: d,
    labelColonMarginInlineStart: b,
    labelColonMarginInlineEnd: f,
    itemMarginBottom: $
  } = i;
  return {
    [l]: Object.assign(Object.assign({}, c(i)), {
      marginBottom: $,
      verticalAlign: "top",
      "&-with-help": {
        transition: "none"
      },
      [`&-hidden,
        &-hidden.${t}-row`]: {
        // https://github.com/ant-design/ant-design/issues/26141
        display: "none"
      },
      "&-has-warning": {
        [`${l}-split`]: {
          color: i.colorError
        }
      },
      "&-has-error": {
        [`${l}-split`]: {
          color: i.colorWarning
        }
      },
      // ==============================================================
      // =                            Label                           =
      // ==============================================================
      [`${l}-label`]: {
        flexGrow: 0,
        overflow: "hidden",
        whiteSpace: "nowrap",
        textAlign: "end",
        verticalAlign: "middle",
        "&-left": {
          textAlign: "start"
        },
        "&-wrap": {
          overflow: "unset",
          lineHeight: i.lineHeight,
          whiteSpace: "unset"
        },
        "> label": {
          position: "relative",
          display: "inline-flex",
          alignItems: "center",
          maxWidth: "100%",
          height: d,
          color: p,
          fontSize: g,
          [`> ${o}`]: {
            fontSize: i.fontSize,
            verticalAlign: "top"
          },
          // Required mark
          [`&${l}-required:not(${l}-required-mark-optional)::before`]: {
            display: "inline-block",
            marginInlineEnd: i.marginXXS,
            color: m,
            fontSize: i.fontSize,
            fontFamily: "SimSun, sans-serif",
            lineHeight: 1,
            content: '"*"',
            [`${e}-hide-required-mark &`]: {
              display: "none"
            }
          },
          // Optional mark
          [`${l}-optional`]: {
            display: "inline-block",
            marginInlineStart: i.marginXXS,
            color: i.colorTextDescription,
            [`${e}-hide-required-mark &`]: {
              display: "none"
            }
          },
          // Optional mark
          [`${l}-tooltip`]: {
            color: i.colorTextDescription,
            cursor: "help",
            writingMode: "horizontal-tb",
            marginInlineStart: i.marginXXS
          },
          "&::after": {
            content: '":"',
            position: "relative",
            marginBlock: 0,
            marginInlineStart: b,
            marginInlineEnd: f
          },
          [`&${l}-no-colon::after`]: {
            content: '"\\a0"'
          }
        }
      },
      // ==============================================================
      // =                            Input                           =
      // ==============================================================
      [`${l}-control`]: {
        "--ant-display": "flex",
        flexDirection: "column",
        flexGrow: 1,
        [`&:first-child:not([class^="'${t}-col-'"]):not([class*="' ${t}-col-'"])`]: {
          width: "100%"
        },
        "&-input": {
          position: "relative",
          display: "flex",
          alignItems: "center",
          minHeight: i.controlHeight,
          "&-content": {
            flex: "auto",
            maxWidth: "100%"
          }
        }
      },
      // ==============================================================
      // =                           Explain                          =
      // ==============================================================
      [l]: {
        "&-explain, &-extra": {
          clear: "both",
          color: i.colorTextDescription,
          fontSize: i.fontSize,
          lineHeight: i.lineHeight
        },
        "&-explain-connected": {
          width: "100%"
        },
        "&-extra": {
          minHeight: i.controlHeightSM,
          transition: `color ${i.motionDurationMid} ${i.motionEaseOut}`
          // sync input color transition
        },
        "&-explain": {
          "&-error": {
            color: i.colorError
          },
          "&-warning": {
            color: i.colorWarning
          }
        }
      },
      [`&-with-help ${l}-explain`]: {
        height: "auto",
        opacity: 1
      },
      // ==============================================================
      // =                        Feedback Icon                       =
      // ==============================================================
      [`${l}-feedback-icon`]: {
        fontSize: i.fontSize,
        textAlign: "center",
        visibility: "visible",
        animationName: s,
        animationDuration: i.motionDurationMid,
        animationTimingFunction: i.motionEaseOutBack,
        pointerEvents: "none",
        "&-success": {
          color: i.colorSuccess
        },
        "&-error": {
          color: i.colorError
        },
        "&-warning": {
          color: i.colorWarning
        },
        "&-validating": {
          color: i.colorPrimary
        }
      }
    })
  };
}, z = (i) => {
  const {
    componentCls: l,
    formItemCls: o
  } = i;
  return {
    [`${l}-horizontal`]: {
      [`${o}-label`]: {
        flexGrow: 0
      },
      [`${o}-control`]: {
        flex: "1 1 0",
        // https://github.com/ant-design/ant-design/issues/32777
        // https://github.com/ant-design/ant-design/issues/33773
        minWidth: 0
      },
      // Do not change this to `ant-col-24`! `-24` match all the responsive rules
      // https://github.com/ant-design/ant-design/issues/32980
      // https://github.com/ant-design/ant-design/issues/34903
      // https://github.com/ant-design/ant-design/issues/44538
      [`${o}-label[class$='-24'], ${o}-label[class*='-24 ']`]: {
        [`& + ${o}-control`]: {
          minWidth: "unset"
        }
      }
    }
  };
}, M = (i) => {
  const {
    componentCls: l,
    formItemCls: o
  } = i;
  return {
    [`${l}-inline`]: {
      display: "flex",
      flexWrap: "wrap",
      [o]: {
        flex: "none",
        marginInlineEnd: i.margin,
        marginBottom: 0,
        "&-row": {
          flexWrap: "nowrap"
        },
        [`> ${o}-label,
        > ${o}-control`]: {
          display: "inline-block",
          verticalAlign: "top"
        },
        [`> ${o}-label`]: {
          flex: "none"
        },
        [`${l}-text`]: {
          display: "inline-block"
        },
        [`${o}-has-feedback`]: {
          display: "inline-block"
        }
      }
    }
  };
}, r = (i) => ({
  padding: i.verticalLabelPadding,
  margin: i.verticalLabelMargin,
  whiteSpace: "initial",
  textAlign: "start",
  "> label": {
    margin: 0,
    "&::after": {
      // https://github.com/ant-design/ant-design/issues/43538
      visibility: "hidden"
    }
  }
}), I = (i) => {
  const {
    componentCls: l,
    formItemCls: o,
    rootPrefixCls: e
  } = i;
  return {
    [`${o} ${o}-label`]: r(i),
    // ref: https://github.com/ant-design/ant-design/issues/45122
    [`${l}:not(${l}-inline)`]: {
      [o]: {
        flexWrap: "wrap",
        [`${o}-label, ${o}-control`]: {
          // When developer pass `xs: { span }`,
          // It should follow the `xs` screen config
          // ref: https://github.com/ant-design/ant-design/issues/44386
          [`&:not([class*=" ${e}-col-xs"])`]: {
            flex: "0 0 100%",
            maxWidth: "100%"
          }
        }
      }
    }
  };
}, H = (i) => {
  const {
    componentCls: l,
    formItemCls: o,
    rootPrefixCls: e
  } = i;
  return {
    [`${l}-vertical`]: {
      [o]: {
        "&-row": {
          flexDirection: "column"
        },
        "&-label > label": {
          height: "auto"
        },
        [`${l}-item-control`]: {
          width: "100%"
        }
      }
    },
    [`${l}-vertical ${o}-label,
      .${e}-col-24${o}-label,
      .${e}-col-xl-24${o}-label`]: r(i),
    [`@media (max-width: ${n(i.screenXSMax)})`]: [I(i), {
      [l]: {
        [`.${e}-col-xs-24${o}-label`]: r(i)
      }
    }],
    [`@media (max-width: ${n(i.screenSMMax)})`]: {
      [l]: {
        [`.${e}-col-sm-24${o}-label`]: r(i)
      }
    },
    [`@media (max-width: ${n(i.screenMDMax)})`]: {
      [l]: {
        [`.${e}-col-md-24${o}-label`]: r(i)
      }
    },
    [`@media (max-width: ${n(i.screenLGMax)})`]: {
      [l]: {
        [`.${e}-col-lg-24${o}-label`]: r(i)
      }
    }
  };
}, v = (i) => ({
  labelRequiredMarkColor: i.colorError,
  labelColor: i.colorTextHeading,
  labelFontSize: i.fontSize,
  labelHeight: i.controlHeight,
  labelColonMarginInlineStart: i.marginXXS / 2,
  labelColonMarginInlineEnd: i.marginXS,
  itemMarginBottom: i.marginLG,
  verticalLabelPadding: `0 0 ${i.paddingXS}px`,
  verticalLabelMargin: 0
}), T = (i, l) => u(i, {
  formItemCls: `${i.componentCls}-item`,
  rootPrefixCls: l
}), Q = x("Form", (i, l) => {
  let {
    rootPrefixCls: o
  } = l;
  const e = T(i, o);
  return [w(e), C(e), S(e), z(e), M(e), H(e), h(e), s];
}, v, {
  // Let From style before the Grid
  // ref https://github.com/ant-design/ant-design/issues/44386
  order: -1e3
});
export {
  Q as default,
  v as prepareComponentToken,
  T as prepareToken
};
