import { r as p, ai as t, j as a, aj as f, ak as x, al as i, am as v, c as n, an as s, ao as k } from "./index-6wLGsgHc.js";
function y(o, e) {
  switch (o) {
    case i.XSMALL:
      return {
        padding: `${e.spacing.twoXS} ${e.spacing.sm}`,
        fontSize: e.fontSizes.sm
      };
    case i.SMALL:
      return {
        padding: `${e.spacing.twoXS} ${e.spacing.md}`
      };
    case i.LARGE:
      return {
        padding: `${e.spacing.md} ${e.spacing.md}`
      };
    default:
      return {
        padding: `${e.spacing.xs} ${e.spacing.md}`
      };
  }
}
const u = /* @__PURE__ */ n("a", {
  target: "e16zdaao3"
})(({
  containerWidth: o,
  size: e,
  theme: r
}) => ({
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  fontWeight: r.fontWeights.normal,
  padding: `${r.spacing.xs} ${r.spacing.md}`,
  borderRadius: r.radii.button,
  minHeight: r.sizes.minElementHeight,
  margin: 0,
  lineHeight: r.lineHeights.base,
  color: r.colors.primary,
  textDecoration: "none",
  width: o ? "100%" : "auto",
  userSelect: "none",
  "&:visited": {
    color: r.colors.primary
  },
  "&:focus": {
    outline: "none"
  },
  "&:focus-visible": {
    // When focus-visible (e.g. if the button was focused via keyboard navigation)
    // we use the hover style of the respective button type (see below) and
    // additionally show a colored focus ring
    boxShadow: `0 0 0 0.2rem ${k(r.colors.primary, 0.5)}`
  },
  "&:hover": {
    textDecoration: "none"
  },
  "&:active": {
    textDecoration: "none"
  },
  ...y(e, r)
}), ""), C = /* @__PURE__ */ n(u, {
  target: "e16zdaao2"
})(({
  theme: o
}) => ({
  backgroundColor: o.colors.primary,
  color: o.colors.white,
  border: `${o.sizes.borderWidth} solid ${o.colors.primary}`,
  "&:hover, &:focus-visible": {
    backgroundColor: s(o.colors.primary, 0.15),
    borderColor: s(o.colors.primary, 0.15)
  },
  "&:active": {
    backgroundColor: o.colors.primary,
    // Keep the border darker when clicked so that the button looks "pressed"
    borderColor: s(o.colors.primary, 0.15)
  },
  "&:visited:not(:active)": {
    color: o.colors.white
  },
  "&[disabled], &[disabled]:hover, &[disabled]:active, &[disabled]:visited": {
    borderColor: o.colors.borderColor,
    backgroundColor: o.colors.transparent,
    color: o.colors.fadedText40,
    cursor: "not-allowed"
  }
}), ""), $ = /* @__PURE__ */ n(u, {
  target: "e16zdaao1"
})(({
  theme: o
}) => ({
  backgroundColor: o.colors.lightenedBg05,
  color: o.colors.bodyText,
  border: `${o.sizes.borderWidth} solid ${o.colors.borderColor}`,
  "&:visited": {
    color: o.colors.bodyText
  },
  "&:hover, &:focus-visible": {
    backgroundColor: o.colors.darkenedBgMix15
  },
  "&:active": {
    backgroundColor: o.colors.darkenedBgMix25
  },
  "&[disabled], &[disabled]:hover, &[disabled]:active": {
    borderColor: o.colors.borderColor,
    backgroundColor: o.colors.transparent,
    color: o.colors.fadedText40,
    cursor: "not-allowed"
  }
}), ""), z = /* @__PURE__ */ n(u, {
  target: "e16zdaao0"
})(({
  theme: o
}) => ({
  padding: o.spacing.none,
  backgroundColor: o.colors.transparent,
  color: o.colors.bodyText,
  border: "none",
  "&:visited": {
    color: o.colors.bodyText
  },
  "&:hover, &:focus-visible": {
    color: o.colors.primary
  },
  "&:hover:not([disabled]), &:focus-visible:not([disabled])": {
    // Also make colored text have the primary color on hover. Since text color is
    // applied as an inline style we need to use !important to override it.
    // Note that we're not doing this when disabled. We should probably do that as
    // well but we don't do it anywhere else.
    "span.stMarkdownColoredText": {
      color: "inherit !important"
    }
  },
  "&:active": {
    color: s(o.colors.primary, 0.25)
  },
  "&[disabled], &[disabled]:hover, &[disabled]:active": {
    backgroundColor: o.colors.transparent,
    color: o.colors.fadedText40,
    cursor: "not-allowed"
  }
}), "");
function B({
  kind: o,
  size: e,
  disabled: r,
  children: d,
  autoFocus: l,
  href: m,
  rel: h,
  target: g,
  onClick: b
}) {
  let c = C;
  return o === t.SECONDARY ? c = $ : o === t.TERTIARY && (c = z), /* @__PURE__ */ a.jsx(c, {
    kind: o,
    size: e || i.MEDIUM,
    containerWidth: !0,
    disabled: r || !1,
    autoFocus: l || !1,
    href: m,
    target: g,
    rel: h,
    onClick: b,
    tabIndex: r ? -1 : 0,
    "data-testid": `stBaseLinkButton-${o}`,
    children: d
  });
}
const S = p.memo(B);
function T(o) {
  const {
    element: e
  } = o;
  let r = t.SECONDARY;
  e.type === "primary" ? r = t.PRIMARY : e.type === "tertiary" && (r = t.TERTIARY);
  const d = (l) => {
    e.disabled && l.preventDefault();
  };
  return /* @__PURE__ */ a.jsx(f, {
    className: "stLinkButton",
    "data-testid": "stLinkButton",
    children: /* @__PURE__ */ a.jsx(x, {
      help: e.help,
      containerWidth: !0,
      children: /* @__PURE__ */ a.jsx(S, {
        kind: r,
        size: i.SMALL,
        disabled: e.disabled,
        onClick: d,
        href: e.url,
        target: "_blank",
        rel: "noreferrer",
        "aria-disabled": e.disabled,
        children: /* @__PURE__ */ a.jsx(v, {
          icon: e.icon,
          label: e.label
        })
      })
    })
  });
}
const L = p.memo(T);
export {
  L as default
};
//# sourceMappingURL=index-CATwv37T-BPdMi6DO.js.map
