import {
  Link
} from "./chunk-OGSDZTHM.js";
import {
  select
} from "./chunk-YMNSXZ5D.js";
import {
  Loading
} from "./chunk-J4FJQ3FN.js";
import {
  UnstyledButton
} from "./chunk-3GS5EFXV.js";
import {
  LightTooltip
} from "./chunk-3EVAP5JT.js";
import {
  Icon
} from "./chunk-RWIZ7Q74.js";
import {
  getFocusOutline
} from "./chunk-JK4BP73A.js";
import {
  colors,
  themeOr
} from "./chunk-2VBDEO6M.js";
import {
  __spreadProps,
  __spreadValues
} from "./chunk-CIGAQ47A.js";

// src/components/Button.tsx
import { css } from "@emotion/react";
import styled from "@emotion/styled";
import { uniqueId } from "lodash-es";
import { Fragment, useRef } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
function getTextColor({ color, theme, primary, blue }) {
  if (color) {
    return color;
  }
  if (blue) {
    return colors.white;
  }
  if (primary) {
    const color2 = theme.hcNeutralFromBg(theme.hcNeutral);
    return color2;
  }
  return theme.text;
}
function getBackgroundColor({
  backgroundColor,
  theme,
  primary,
  blue,
  ghost
}) {
  if (ghost) {
    return "none";
  }
  if (backgroundColor) {
    return backgroundColor;
  }
  if (blue) {
    return colors.blue43;
  }
  if (primary) {
    return themeOr(theme.c9Neutral, colors.white)({ theme });
  }
  return themeOr(colors.white, theme.c1Neutral)({ theme });
}
var paddingsY = {
  lg: 14,
  md: 9,
  sm: 6
};
var roundPaddingsX = {
  lg: 19,
  md: 14,
  sm: 10
};
var paddingsX = {
  lg: 24,
  md: 18,
  sm: 16
};
function getPaddingX({
  size,
  ghost,
  isRound
}) {
  return ghost ? 0 : isRound ? roundPaddingsX[size] : paddingsX[size];
}
function getPadding({
  iconWidth,
  size,
  ghost,
  iconSide,
  isRound
}) {
  const paddingY = ghost ? 0 : paddingsY[size];
  const paddingX = getPaddingX({ size, ghost, isRound });
  const paddingForIcon = iconWidth && !ghost ? iconWidth : 0;
  return `${paddingY}px ${paddingX + (iconSide === "right" ? paddingForIcon : 0)}px ${paddingY}px ${paddingX + (iconSide === "left" ? paddingForIcon : 0)}px`;
}
function getBorder({ ghost }) {
  if (ghost) {
    return "none";
  }
  return "1px solid";
}
function getInnerBorderColor({
  backgroundColor,
  theme,
  primary,
  blue
}) {
  if (primary || blue || backgroundColor) {
    return getBackgroundColor({
      backgroundColor,
      theme,
      primary,
      blue
    });
  }
  return themeOr(colors.gray90, colors.gray20)({ theme });
}
function Button({
  backgroundColor,
  color,
  hoverColor,
  primary = false,
  ghost = false,
  text,
  to,
  hash,
  href,
  toParams,
  onClick,
  icon,
  iconSide = "left",
  loading = false,
  fullWidth = false,
  disabled = false,
  size = "lg",
  mt = 0,
  ml = 0,
  type = "button",
  blue = false,
  newTab = false,
  zIndex = void 0,
  tooltipText
}) {
  const tooltipId = useRef(uniqueId());
  const iconMarginRight = 6;
  const iconSize = size === "lg" ? 16 : 12;
  let currentIcon = null;
  if (loading) {
    currentIcon = /* @__PURE__ */ jsx(ButtonIcon, { ghost, iconSide, text, size, children: /* @__PURE__ */ jsx(Loading, { size: iconSize, center: false }) });
  } else if (icon) {
    currentIcon = /* @__PURE__ */ jsx(ButtonIcon, { ghost, iconSide, text, size, children: /* @__PURE__ */ jsx(Icon, { name: icon, width: iconSize }) });
  }
  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(
      "div",
      __spreadProps(__spreadValues({}, tooltipText ? { "data-tooltip-id": tooltipId.current } : {}), {
        css: {
          display: "flex",
          alignItems: "center",
          justifyContent: "center"
        },
        children: [
          iconSide === "left" && currentIcon,
          /* @__PURE__ */ jsx(
            "div",
            {
              css: {
                textOverflow: "ellipsis",
                overflow: "hidden"
              },
              children: text
            }
          ),
          iconSide === "right" && currentIcon
        ]
      })
    ),
    tooltipText ? /* @__PURE__ */ jsx(LightTooltip, { id: tooltipId.current, content: tooltipText }) : null
  ] });
  const isSingleCharRoundButton = Boolean(text && text.length === 1 && !icon);
  const commonProps = {
    backgroundColor,
    color,
    hoverColor,
    type,
    size,
    onClick,
    primary,
    ghost,
    fullWidth,
    blue,
    iconSide,
    isRound: isSingleCharRoundButton,
    iconWidth: currentIcon ? iconSize + iconMarginRight : 0,
    isLoading: loading,
    disabled: disabled || loading,
    css: {
      marginTop: mt ? `${mt}px` : void 0,
      marginLeft: ml ? `${ml}px` : void 0
    },
    newTab,
    text,
    zIndex
  };
  if (to) {
    return /* @__PURE__ */ jsx(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, hash, children: content }));
  }
  return href ? /* @__PURE__ */ jsx(ButtonHrefLink, __spreadProps(__spreadValues({}, commonProps), { href, target: "_blank", children: content })) : /* @__PURE__ */ jsx(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
}
var buttonStyle = ({
  color,
  backgroundColor,
  hoverColor,
  theme,
  primary,
  ghost,
  disabled,
  isLoading,
  size,
  fullWidth,
  iconWidth,
  blue,
  text,
  zIndex,
  iconSide,
  isRound
}) => css`
  display: inline-flex;
  opacity: ${disabled && !isLoading ? 0.2 : 1};
  transition: opacity 0.2s;
  position: relative;

  ${zIndex && `z-index: ${zIndex};`}

  color: ${getTextColor({ color, theme, primary, blue })};
  font-size: ${["lg", "md"].includes(size) ? "14px" : "12px"};
  font-weight: 600;

  &:focus-visible {
    outline: ${getFocusOutline({ theme })};
  }

  width: ${fullWidth ? "100%" : "fit-content"};

  & > * {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    background-color: ${getBackgroundColor({
  backgroundColor,
  theme,
  primary,
  blue,
  ghost
})};
    border: ${getBorder({ ghost })};
    border-color: ${getInnerBorderColor({
  backgroundColor,
  theme,
  primary,
  blue
})};
    border-radius: ${isRound ? "100%" : "32px"};
    padding: ${getPadding({
  size,
  iconWidth,
  text,
  ghost,
  iconSide,
  isRound
})};
    color: ${getTextColor({ color, theme, primary, blue })};
    transition:
      background-color 0.2s ease-out,
      border-color 0.2s ease-out;

    &:hover {
      ${hoverColor && ghost ? "" : `background-color: ${hoverColor}; border-color: ${hoverColor};`}
    }
  }
`;
var ButtonIcon = styled.div`
  ${(props) => props.ghost ? "" : "position: absolute;"}
  ${({ iconSide, ghost, text, size }) => `${iconSide}: ${ghost && text ? 0 : getPaddingX({ size, ghost, isRound: false })}px;`}
`;
var StyledButton = styled(UnstyledButton)`
  ${(props) => buttonStyle(props)}
`;
var ButtonLink = styled(Link)`
  ${(props) => buttonStyle(props)}
`;
var ButtonHrefLink = styled.a`
  ${(props) => buttonStyle(props)}
`;
var ButtonSelector = (prepend = "", append = "") => `${prepend}*:is(${select(StyledButton)}, ${select(ButtonLink)}, ${select(
  ButtonHrefLink
)})${append}`;

export {
  Button,
  StyledButton,
  ButtonSelector
};
