import n, { css as i } from "styled-components";
import { getSVGSize as c, getIconButtonSize as d, getHoverIconButtonBackground as s, getActiveIconButtonBackground as g, getIconButtonBackgroundColorLoading as l, getIconButtonBackgroundColor as $, getDisabledBackgroundColor as f, getSpinnerType as b, getIconButtonSvgColor as p } from "./utils.js";
import { convertToTransientProps as a, getColorAlias as u, getDefaultTransition as B } from "../../utils/index.js";
const h = n.button`
  display: flex;
  align-items: center;
  justify-content: center;
`;
n(h).withConfig({
  shouldForwardProp: a(["isLoading"])
})`
  ${({ size: o }) => c(o)}
`;
const w = n.button.withConfig(
  {
    shouldForwardProp: a([
      "isLoading",
      "hasFocus"
    ])
  }
)`
  display: flex;
  align-items: center;
  justify-content: center;
  height: ${({ size: o }) => d(o)};
  width: ${({ size: o }) => d(o)};
  border-radius: ${({ theme: o }) => o.radius.roundedE};
  background-color: ${({ variant: o, isLoading: t, theme: r }) => t ? l(o, r.mode === "dark") : $(o)};
  border: 1px solid
    ${(o) => o.variant === "outline" ? u("borderStrong", o.theme) : "transparent"};
  ${({ disabled: o, variant: t, isLoading: r }) => o && !r && i`
        background-color: ${f(t)};
      `}
  &:hover {
    cursor: ${({ isLoading: o }) => o ? "wait" : "pointer"};
    background: ${({ isLoading: o, disabled: t, variant: r, theme: e }) => !o && !t && s(r, e.mode === "dark")};
  }
  &:active {
    background: ${({ isLoading: o, disabled: t, variant: r, theme: e }) => !o && !t && g(r, e.mode === "dark")};
  }
  svg {
    ${({ size: o, variant: t, disabled: r, isLoading: e }) => i`
        ${c(o)};
        fill: ${e ? b(t) : p(t, r)};
      `}
  }
  &:disabled:hover {
    cursor: not-allowed;
  }
  &:focus,
  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px ${u("focusOuter")};
  }
  ${B()};
`;
export {
  h as FlexButton,
  w as IconButtonContainer
};
