import { resetIcon as u } from "../../style/index.mjs";
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 a } 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 { merge as c } from "../../theme/util/statistic.mjs";
const t = 2, p = (i) => {
  const {
    multipleSelectItemHeight: l,
    selectHeight: e,
    lineWidth: r
  } = i;
  return i.calc(e).sub(l).div(2).sub(r).equal();
};
function s(i, l) {
  const {
    componentCls: e,
    iconCls: r
  } = i, o = `${e}-selection-overflow`, n = i.multipleSelectItemHeight, d = p(i), m = l ? `${e}-${l}` : "";
  return {
    [`${e}-multiple${m}`]: {
      fontSize: i.fontSize,
      /**
       * Do not merge `height` & `line-height` under style with `selection` & `search`, since chrome
       * may update to redesign with its align logic.
       */
      // =========================== Overflow ===========================
      [o]: {
        position: "relative",
        display: "flex",
        flex: "auto",
        flexWrap: "wrap",
        maxWidth: "100%",
        "&-item": {
          flex: "none",
          alignSelf: "center",
          maxWidth: "100%",
          display: "inline-flex"
        }
      },
      // ========================= Selector =========================
      [`${e}-selector`]: {
        display: "flex",
        flexWrap: "wrap",
        alignItems: "center",
        height: "100%",
        // Multiple is little different that horizontal is follow the vertical
        paddingInline: i.calc(t).mul(2).equal(),
        paddingBlock: i.calc(d).sub(t).equal(),
        borderRadius: i.borderRadius,
        [`${e}-show-search&`]: {
          cursor: "text"
        },
        [`${e}-disabled&`]: {
          background: i.multipleSelectorBgDisabled,
          cursor: "not-allowed"
        },
        "&:after": {
          display: "inline-block",
          width: 0,
          margin: `${a(t)} 0`,
          lineHeight: a(n),
          visibility: "hidden",
          content: '"\\a0"'
        }
      },
      [`
        &${e}-show-arrow ${e}-selector,
        &${e}-allow-clear ${e}-selector
      `]: {
        paddingInlineEnd: i.calc(i.fontSizeIcon).add(i.controlPaddingHorizontal).equal()
      },
      // ======================== Selections ========================
      [`${e}-selection-item`]: {
        display: "flex",
        alignSelf: "center",
        flex: "none",
        boxSizing: "border-box",
        maxWidth: "100%",
        height: n,
        marginTop: t,
        marginBottom: t,
        lineHeight: a(i.calc(n).sub(i.calc(i.lineWidth).mul(2)).equal()),
        background: i.multipleItemBg,
        border: `${a(i.lineWidth)} ${i.lineType} ${i.multipleItemBorderColor}`,
        borderRadius: i.borderRadiusSM,
        cursor: "default",
        transition: `font-size ${i.motionDurationSlow}, line-height ${i.motionDurationSlow}, height ${i.motionDurationSlow}`,
        marginInlineEnd: i.calc(t).mul(2).equal(),
        paddingInlineStart: i.paddingXS,
        paddingInlineEnd: i.calc(i.paddingXS).div(2).equal(),
        [`${e}-disabled&`]: {
          color: i.multipleItemColorDisabled,
          borderColor: i.multipleItemBorderColorDisabled,
          cursor: "not-allowed"
        },
        // It's ok not to do this, but 24px makes bottom narrow in view should adjust
        "&-content": {
          display: "inline-block",
          marginInlineEnd: i.calc(i.paddingXS).div(2).equal(),
          overflow: "hidden",
          whiteSpace: "pre",
          // fix whitespace wrapping. custom tags display all whitespace within.
          textOverflow: "ellipsis"
        },
        "&-remove": Object.assign(Object.assign({}, u()), {
          display: "inline-flex",
          alignItems: "center",
          color: i.colorIcon,
          fontWeight: "bold",
          fontSize: 10,
          lineHeight: "inherit",
          cursor: "pointer",
          [`> ${r}`]: {
            verticalAlign: "-0.2em"
          },
          "&:hover": {
            color: i.colorIconHover
          }
        })
      },
      // ========================== Input ==========================
      [`${o}-item + ${o}-item`]: {
        [`${e}-selection-search`]: {
          marginInlineStart: 0
        }
      },
      // https://github.com/ant-design/ant-design/issues/44754
      [`${o}-item-suffix`]: {
        height: "100%"
      },
      [`${e}-selection-search`]: {
        display: "inline-flex",
        position: "relative",
        maxWidth: "100%",
        marginInlineStart: i.calc(i.inputPaddingHorizontalBase).sub(d).equal(),
        "\n          &-input,\n          &-mirror\n        ": {
          height: n,
          fontFamily: i.fontFamily,
          lineHeight: a(n),
          transition: `all ${i.motionDurationSlow}`
        },
        "&-input": {
          width: "100%",
          minWidth: 4.1
          // fix search cursor missing
        },
        "&-mirror": {
          position: "absolute",
          top: 0,
          insetInlineStart: 0,
          insetInlineEnd: "auto",
          zIndex: 999,
          whiteSpace: "pre",
          // fix whitespace wrapping caused width calculation bug
          visibility: "hidden"
        }
      },
      // ======================= Placeholder =======================
      [`${e}-selection-placeholder`]: {
        position: "absolute",
        top: "50%",
        insetInlineStart: i.inputPaddingHorizontalBase,
        insetInlineEnd: i.inputPaddingHorizontalBase,
        transform: "translateY(-50%)",
        transition: `all ${i.motionDurationSlow}`
      }
    }
  };
}
const g = (i) => {
  const {
    componentCls: l
  } = i, e = c(i, {
    selectHeight: i.controlHeightSM,
    multipleSelectItemHeight: i.controlHeightXS,
    borderRadius: i.borderRadiusSM,
    borderRadiusSM: i.borderRadiusXS
  }), r = c(i, {
    fontSize: i.fontSizeLG,
    selectHeight: i.controlHeightLG,
    multipleSelectItemHeight: i.multipleItemHeightLG,
    borderRadius: i.borderRadiusLG,
    borderRadiusSM: i.borderRadius
  });
  return [
    s(i),
    // ======================== Small ========================
    s(e, "sm"),
    // Padding
    {
      [`${l}-multiple${l}-sm`]: {
        [`${l}-selection-placeholder`]: {
          insetInline: i.calc(i.controlPaddingHorizontalSM).sub(i.lineWidth).equal()
        },
        // https://github.com/ant-design/ant-design/issues/29559
        [`${l}-selection-search`]: {
          marginInlineStart: 2
          // Magic Number
        }
      }
    },
    // ======================== Large ========================
    s(r, "lg")
  ];
}, W = g;
export {
  W as default
};
