"use client";
import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { ExperimentalIcon } from "./Icon.js";
import { ExperimentalLoadingIndicator } from "./LoadingIndicator.js";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
import { ButtonOrLink } from "../atoms/ButtonOrLink/ButtonOrLink.js";
const ExperimentalButton = forwardRef(
  ({
    variant,
    size,
    hideLabel,
    iconBefore: passedIconBefore,
    iconAfter: passedIconAfter,
    loading = false,
    disabled = false,
    className,
    style,
    children,
    ...props
  }, ref) => {
    const { polyfillAttributes, polyfillElement } = useCSSPropsPolyfill("button", { variant, size, hideLabel });
    const loadingIndicator = /* @__PURE__ */ jsx(ExperimentalLoadingIndicator, { color: "current" });
    const iconBefore = passedIconBefore && loading && !passedIconAfter ? loadingIndicator : passedIconBefore;
    const iconAfter = passedIconAfter && loading ? loadingIndicator : passedIconAfter;
    const replaceChildrenByLoading = loading && !iconBefore && !iconAfter;
    return /* @__PURE__ */ jsxs(
      "span",
      {
        "data-has-children": children ? true : void 0,
        className: classNames([
          /**
           * The `pointer-events-none` on the wrapper ensures that consumer styles based on this element's hover/active state don't trigger
           * when the button itself is not actually hovered/active, for instance if the cursor is in the rounded corner of the button.
           */
          `gds-button flex pointer-events-none -:h-max -:max-w-full
          --:w-max ${/* Less important than the children styles of `ExperimentalButtonGroup` */
          ""}
          ${/* Ensure icon-only buttons do not get squished */
          ""}
          -:not-data-[has-children]:min-w-auto
          -:has-icon-only:min-w-auto
          +:not-data-[has-children]:prop-hide-label-true`,
          className
        ]),
        ...getCSSPropsAttributes("button", { variant, size, hideLabel }, style),
        ...polyfillAttributes,
        children: [
          polyfillElement,
          /* @__PURE__ */ jsxs(
            ButtonOrLink,
            {
              ref,
              disabled: disabled || (loading ? "focusable" : false),
              "data-loading": loading || void 0,
              className: `
            group/button flex h-[var(--height)] min-h-full min-w-[var(--height)] grow items-center justify-center
            border border-transparent px-[var(--padding)] text-white transition pointer-events-previous
            [--children-opacity:theme(opacity.100)]
            [--icons-margin:theme(spacing[0.5])]
            active:transition-none
            disabled:[--children-opacity:theme(opacity.60)]
            nested-icon:disabled:grayscale
            @prop-size-xsmall/button:rounded-6
            @prop-size-xsmall/button:text-12
            @prop-size-xsmall/button:font-regular
            @prop-size-xsmall/button:[--height:theme(spacing.7)]
            @prop-size-xsmall/button:[--padding:5px]
            @prop-size-xsmall/button:nested-icon:default-size-3
            @prop-size-small/button:rounded-6
            @prop-size-small/button:text-12
            @prop-size-small/button:font-regular
            @prop-size-small/button:[--height:theme(spacing.8)]
            @prop-size-small/button:[--padding:7px]
            @prop-size-small/button:nested-icon:default-size-3.5
            @prop-size-medium/button:rounded-8
            @prop-size-medium/button:text-14
            @prop-size-medium/button:font-medium
            @prop-size-medium/button:[--height:theme(spacing.10)]
            @prop-size-medium/button:[--padding:7px]
            @prop-size-medium/button:nested-icon:default-size-4
            @prop-size-large/button:rounded-8
            @prop-size-large/button:text-16
            @prop-size-large/button:font-medium
            @prop-size-large/button:[--height:theme(spacing.12)]
            @prop-size-large/button:[--icons-margin:3px]
            @prop-size-large/button:[--padding:11px]
            @prop-size-large/button:nested-icon:default-size-4.5
            @prop-variant-primary/button:border-purple-400
            @prop-variant-primary/button:bg-purple-500
            @prop-variant-primary/button:hover:border-purple-300
            @prop-variant-primary/button:hover:bg-purple-400
            @prop-variant-primary/button:active:border-purple-600
            @prop-variant-primary/button:active:bg-purple-700
            @prop-variant-primary/button:disabled:border-transparent
            @prop-variant-primary/button:disabled:bg-purple-900
            @prop-variant-secondary/button:border-space-1200
            @prop-variant-secondary/button:bg-space-1400
            @prop-variant-secondary/button:hover:border-space-1100
            @prop-variant-secondary/button:hover:bg-space-1200
            @prop-variant-secondary/button:active:border-space-1300
            @prop-variant-secondary/button:active:bg-space-1500
            @prop-variant-secondary/button:disabled:border-transparent
            @prop-variant-secondary/button:disabled:bg-space-1600
            @prop-variant-tertiary/button:border-space-1200
            @prop-variant-tertiary/button:bg-transparent
            @prop-variant-tertiary/button:hover:border-space-1100
            @prop-variant-tertiary/button:hover:bg-space-1200
            @prop-variant-tertiary/button:active:border-space-1300
            @prop-variant-tertiary/button:active:bg-space-1400
            @prop-variant-tertiary/button:disabled:border-space-1400
            @prop-variant-tertiary/button:disabled:bg-transparent
            @prop-variant-inverse/button:border-white
            @prop-variant-inverse/button:bg-space-100
            @prop-variant-inverse/button:text-space-1800
            @prop-variant-inverse/button:hover:border-white
            @prop-variant-inverse/button:hover:bg-white
            @prop-variant-inverse/button:active:border-space-500
            @prop-variant-inverse/button:active:bg-space-500
            @prop-variant-inverse/button:disabled:border-transparent
            @prop-variant-inverse/button:disabled:bg-space-300
            @prop-variant-danger/button:border-sonja-400
            @prop-variant-danger/button:bg-sonja-500
            @prop-variant-danger/button:hover:border-sonja-300
            @prop-variant-danger/button:hover:bg-sonja-400
            @prop-variant-danger/button:active:border-sonja-600
            @prop-variant-danger/button:active:bg-sonja-700
            @prop-variant-danger/button:disabled:border-transparent
            @prop-variant-danger/button:disabled:bg-sonja-900
            @prop-variant-naked/button:h-auto
            @prop-variant-naked/button:min-w-0
            @prop-variant-naked/button:border-0
            @prop-variant-naked/button:bg-transparent
            @prop-variant-naked/button:px-0
            @prop-variant-naked/button:text-space-500
            @prop-variant-naked/button:outline-none
            @prop-variant-naked/button:hocus-visible:text-white
            @prop-variant-naked/button:active:text-space-300
            @prop-variant-naked/button:disabled:text-space-500
            @prop-hide-label-true/button:[--icons-margin:0px]
          `,
              ...props,
              children: [
                /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: `
              absolute m-auto hidden h-[var(--height)] w-[calc(100%+var(--padding)*2)] min-w-[var(--height)] rounded-[inherit] transition
              group-focus-visible/button:outline-focus
              @prop-variant-naked/button:block
            `
                  }
                ),
                iconBefore ? /* @__PURE__ */ jsx(
                  ExperimentalIcon,
                  {
                    alt: "",
                    className: "m-[var(--icons-margin)] opacity-[var(--children-opacity)] transition-opacity",
                    children: iconBefore
                  }
                ) : null,
                children ? /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: classNames([
                      `truncate opacity-[var(--children-opacity)] transition-opacity
                has-icon-only:px-0
                @prop-size-xsmall/button:px-0.5
                @prop-size-small/button:px-0.5
                @prop-size-medium/button:px-1
                @prop-size-large/button:px-1
                @prop-hide-label-true/button:not-has-icon-only:sr-only`,
                      replaceChildrenByLoading ? "invisible" : null
                    ]),
                    children
                  }
                ) : null,
                replaceChildrenByLoading ? /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center opacity-[var(--children-opacity)] transition-opacity", children: loadingIndicator }) : null,
                iconAfter ? /* @__PURE__ */ jsx(
                  ExperimentalIcon,
                  {
                    alt: "",
                    className: "m-[var(--icons-margin)] opacity-[var(--children-opacity)] transition-opacity",
                    children: iconAfter
                  }
                ) : null
              ]
            }
          )
        ]
      }
    );
  }
);
ExperimentalButton.displayName = "ExperimentalButton";
export {
  ExperimentalButton
};
