import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
import "react";
import PropTypes from "../../../prop-types/index.js";
import { emphasize as emphasize_1 } from "../../system/colorManipulator.js";
import styled from "../styles/styled.js";
import MoreHorizIcon from "../internal/svg-icons/MoreHoriz.js";
import { jsx } from "react/jsx-runtime";
import ButtonBase from "../ButtonBase/ButtonBase.js";
const _excluded = ["slots", "slotProps"];
const BreadcrumbCollapsedButton = styled(ButtonBase, {
  name: "MuiBreadcrumbCollapsed"
})(({
  theme
}) => _extends({
  display: "flex",
  marginLeft: `calc(${theme.spacing(1)} * 0.5)`,
  marginRight: `calc(${theme.spacing(1)} * 0.5)`
}, theme.palette.mode === "light" ? {
  backgroundColor: theme.palette.grey[100],
  color: theme.palette.grey[700]
} : {
  backgroundColor: theme.palette.grey[700],
  color: theme.palette.grey[100]
}, {
  borderRadius: 2,
  "&:hover, &:focus": _extends({}, theme.palette.mode === "light" ? {
    backgroundColor: theme.palette.grey[200]
  } : {
    backgroundColor: theme.palette.grey[600]
  }),
  "&:active": _extends({
    boxShadow: theme.shadows[0]
  }, theme.palette.mode === "light" ? {
    backgroundColor: emphasize_1(theme.palette.grey[200], 0.12)
  } : {
    backgroundColor: emphasize_1(theme.palette.grey[600], 0.12)
  })
}));
const BreadcrumbCollapsedIcon = styled(MoreHorizIcon)({
  width: 24,
  height: 16
});
function BreadcrumbCollapsed(props) {
  const {
    slots = {},
    slotProps = {}
  } = props, otherProps = _objectWithoutPropertiesLoose(props, _excluded);
  const ownerState = props;
  return /* @__PURE__ */ jsx("li", {
    children: /* @__PURE__ */ jsx(BreadcrumbCollapsedButton, _extends({
      focusRipple: true
    }, otherProps, {
      ownerState,
      children: /* @__PURE__ */ jsx(BreadcrumbCollapsedIcon, _extends({
        as: slots.CollapsedIcon,
        ownerState
      }, slotProps.collapsedIcon))
    }))
  });
}
process.env.NODE_ENV !== "production" ? BreadcrumbCollapsed.propTypes = {
  /**
   * The props used for the CollapsedIcon slot.
   * @default {}
   */
  slotProps: PropTypes.shape({
    collapsedIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  }),
  /**
   * The components used for each slot inside the BreadcumbCollapsed.
   * Either a string to use a HTML element or a component.
   * @default {}
   */
  slots: PropTypes.shape({
    CollapsedIcon: PropTypes.elementType
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: PropTypes.object
} : void 0;
export {
  BreadcrumbCollapsed as default
};
