import '../../../theme/index.mjs';
import { genCompactItemStyle } from '../../../theme/style/compact-item.mjs';
import genSingleStyle from './single.mjs';
import genMultipleStyle from './multiple.mjs';
import genSingleStyle$1 from './dropdown.mjs';
import { resetComponent, textEllipsis, resetIcon } from '../../../theme/style/index.mjs';
import { merge } from '../../../theme/token/util/statistic.mjs';
import genComponentStyleHook from '../../../theme/token/util/genComponentStyleHook.mjs';

const genSelectorStyle = (token) => {
  const { componentCls } = token;
  return {
    position: "relative",
    backgroundColor: token.colorBgContainer,
    border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
    transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
    input: {
      cursor: "pointer"
    },
    [`${componentCls}-show-search&`]: {
      cursor: "text",
      input: {
        cursor: "auto",
        color: "inherit"
      }
    },
    [`${componentCls}-disabled&`]: {
      color: token.colorTextDisabled,
      background: token.colorBgContainerDisabled,
      cursor: "not-allowed",
      [`${componentCls}-multiple&`]: {
        background: token.colorBgContainerDisabled
      },
      input: {
        cursor: "not-allowed"
      }
    }
  };
};
function genStatusStyle(rootSelectCls, token, overwriteDefaultBorder = false) {
  const { componentCls, borderHoverColor, outlineColor, antCls } = token;
  const overwriteStyle = overwriteDefaultBorder ? {
    [`${componentCls}-selector`]: {
      borderColor: borderHoverColor
    }
  } : {};
  return {
    [rootSelectCls]: {
      [`&:not(${componentCls}-disabled):not(${componentCls}-customize-input):not(${antCls}-pagination-size-changer)`]: {
        ...overwriteStyle,
        [`${componentCls}-focused& ${componentCls}-selector`]: {
          borderColor: borderHoverColor,
          boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${outlineColor}`,
          borderInlineEndWidth: `${token.controlLineWidth}px !important`,
          outline: 0
        },
        [`&:hover ${componentCls}-selector`]: {
          borderColor: borderHoverColor,
          borderInlineEndWidth: `${token.controlLineWidth}px !important`
        }
      }
    }
  };
}
const getSearchInputWithoutBorderStyle = (token) => {
  const { componentCls } = token;
  return {
    [`${componentCls}-selection-search-input`]: {
      "margin": 0,
      "padding": 0,
      "background": "transparent",
      "border": "none",
      "outline": "none",
      "appearance": "none",
      "&::-webkit-search-cancel-button": {
        "display": "none",
        "-webkit-appearance": "none"
      }
    }
  };
};
const genBaseStyle = (token) => {
  const { componentCls, inputPaddingHorizontalBase, iconCls } = token;
  return {
    [componentCls]: {
      ...resetComponent(token),
      "position": "relative",
      "display": "inline-block",
      "cursor": "pointer",
      [`&:not(${componentCls}-customize-input) ${componentCls}-selector`]: {
        ...genSelectorStyle(token),
        ...getSearchInputWithoutBorderStyle(token)
      },
      // [`&:not(&-disabled):hover ${selectCls}-selector`]: {
      //   ...genHoverStyle(token),
      // },
      // ======================== Selection ========================
      [`${componentCls}-selection-item`]: {
        flex: 1,
        fontWeight: "normal",
        ...textEllipsis
      },
      // ======================= Placeholder =======================
      [`${componentCls}-selection-placeholder`]: {
        ...textEllipsis,
        flex: 1,
        color: token.colorTextPlaceholder,
        pointerEvents: "none"
      },
      // ========================== Arrow ==========================
      [`${componentCls}-arrow`]: {
        ...resetIcon(),
        "position": "absolute",
        "top": "50%",
        "insetInlineStart": "auto",
        "insetInlineEnd": inputPaddingHorizontalBase,
        "height": token.fontSizeIcon,
        "marginTop": -token.fontSizeIcon / 2,
        "color": token.colorTextQuaternary,
        "fontSize": token.fontSizeIcon,
        "lineHeight": 1,
        "textAlign": "center",
        "pointerEvents": "none",
        "display": "flex",
        "alignItems": "center",
        [iconCls]: {
          "verticalAlign": "top",
          "transition": `transform ${token.motionDurationSlow}`,
          "> svg": {
            verticalAlign: "top"
          },
          [`&:not(${componentCls}-suffix)`]: {
            pointerEvents: "auto"
          }
        },
        [`${componentCls}-disabled &`]: {
          cursor: "not-allowed"
        },
        "> *:not(:last-child)": {
          marginInlineEnd: 8
          // FIXME: magic
        }
      },
      // ========================== Clear ==========================
      [`${componentCls}-clear`]: {
        "position": "absolute",
        "top": "50%",
        "insetInlineStart": "auto",
        "insetInlineEnd": inputPaddingHorizontalBase,
        "zIndex": 1,
        "display": "inline-block",
        "width": token.fontSizeIcon,
        "height": token.fontSizeIcon,
        "marginTop": -token.fontSizeIcon / 2,
        "color": token.colorTextQuaternary,
        "fontSize": token.fontSizeIcon,
        "fontStyle": "normal",
        "lineHeight": 1,
        "textAlign": "center",
        "textTransform": "none",
        "background": token.colorBgContainer,
        "cursor": "pointer",
        "opacity": 0,
        "transition": `color ${token.motionDurationMid} ease, opacity ${token.motionDurationSlow} ease`,
        "textRendering": "auto",
        "&:before": {
          display: "block"
        },
        "&:hover": {
          color: token.colorTextTertiary
        }
      },
      "&:hover": {
        [`${componentCls}-clear`]: {
          opacity: 1
        }
      }
    },
    // ========================= Feedback ==========================
    [`${componentCls}-has-feedback`]: {
      [`${componentCls}-clear`]: {
        insetInlineEnd: inputPaddingHorizontalBase + token.fontSize + token.paddingXXS
      }
    }
  };
};
const genSelectStyle = (token) => {
  const { componentCls } = token;
  return [
    {
      [componentCls]: {
        // ==================== BorderLess ====================
        [`&-borderless ${componentCls}-selector`]: {
          backgroundColor: "transparent !important",
          borderColor: "transparent !important",
          boxShadow: "none !important"
        },
        // ==================== In Form ====================
        [`&${componentCls}-in-form-item`]: {
          width: "100%"
        }
      }
    },
    // =====================================================
    // ==                       LTR                       ==
    // =====================================================
    // Base
    genBaseStyle(token),
    // Single
    genSingleStyle(token),
    // Multiple
    genMultipleStyle(token),
    // Dropdown
    genSingleStyle$1(token),
    // =====================================================
    // ==                       RTL                       ==
    // =====================================================
    {
      [`${componentCls}-rtl`]: {
        direction: "rtl"
      }
    },
    // =====================================================
    // ==                     Status                      ==
    // =====================================================
    genStatusStyle(
      componentCls,
      merge(token, {
        borderHoverColor: token.colorPrimaryHover,
        outlineColor: token.controlOutline
      })
    ),
    genStatusStyle(
      `${componentCls}-status-error`,
      merge(token, {
        borderHoverColor: token.colorErrorHover,
        outlineColor: token.colorErrorOutline
      }),
      true
    ),
    genStatusStyle(
      `${componentCls}-status-warning`,
      merge(token, {
        borderHoverColor: token.colorWarningHover,
        outlineColor: token.colorWarningOutline
      }),
      true
    ),
    // =====================================================
    // ==             Space Compact                       ==
    // =====================================================
    genCompactItemStyle(token, {
      borderElCls: `${componentCls}-selector`,
      focusElCls: `${componentCls}-focused`
    })
  ];
};
var useSelectStyle = genComponentStyleHook(
  "Select",
  (token, { rootPrefixCls }) => {
    const selectToken = merge(token, {
      rootPrefixCls,
      inputPaddingHorizontalBase: token.paddingSM - 1
    });
    return [genSelectStyle(selectToken)];
  },
  (token) => ({
    zIndexPopup: token.zIndexPopupBase + 50
  })
);

export { useSelectStyle as default };
//# sourceMappingURL=index.mjs.map
