import { mapAndReduceOver as c } from "../../utils/map-helper.js";
const i = (a) => {
  const { spacing: n, color: o, get: e } = a, d = {
    primary: {
      color: o("content.inverse.strong"),
      backgroundColor: o("interaction.default"),
      hoverColor: o("primary.70"),
      pressedColor: o("primary.80")
    },
    grey: {
      color: o("content.primary"),
      backgroundColor: o("grey.20"),
      hoverColor: o("grey.30"),
      pressedColor: o("grey.40")
    },
    warn: {
      color: o("content.primary"),
      backgroundColor: o("interaction.warning"),
      hoverColor: o("amber.70"),
      pressedColor: o("amber.80")
    },
    critical: {
      color: o("content.inverse.strong"),
      backgroundColor: o("interaction.critical"),
      hoverColor: o("alertRed.70"),
      pressedColor: o("alertRed.80")
    },
    "warn-dark": {
      color: o("content.inverse.strong"),
      backgroundColor: o("amber.90"),
      hoverColor: o("amber.80"),
      pressedColor: o("amber.70")
    }
  };
  return {
    ".btn": {
      padding: n(3, 4),
      borderRadius: n(1.5),
      fontWeight: "600",
      transitionProperty: "background-color",
      transitionDuration: e("transitionDuration.default"),
      transitionTimingFunction: e("transitionTimingFunction.default"),
      display: "flex",
      flexDirection: "row",
      alignItems: "center",
      gap: n(1),
      "&.size-sm": {
        padding: n(2, 3),
        fontSize: e("fontSize.sm")
      },
      "&.size-xs": {
        padding: n(0.5, 2),
        fontSize: e("fontSize.sm")
      },
      "&.size-md": {
        padding: n(3, 4),
        fontSize: e("fontSize.body")
      },
      "&.size-lg": {
        padding: n(5, 6),
        fontSize: "18px"
      }
    },
    ".btn:hover": {
      cursor: "pointer"
    },
    ".btn .btn-icon": {
      width: n(6),
      height: n(6)
    },
    ".btn.size-sm .btn-icon, .btn.size-xs .btn-icon": {
      width: n(5),
      height: n(5)
    },
    ...c(
      (t, r) => ({
        [`.btn-${t}`]: {
          color: r.color,
          backgroundColor: r.backgroundColor,
          "&:hover": {
            color: r.hoverFontColor ?? r.color,
            backgroundColor: r.hoverColor
          },
          "&:active": {
            color: r.pressedFontColor ?? r.color,
            backgroundColor: r.pressedColor
          },
          "&:disabled": {
            color: o("interaction.support.disabled.medium"),
            backgroundColor: o("interaction.support.disabled.subtle")
          }
        },
        [`.btn-${t}-outline`]: {
          color: r.backgroundColor,
          background: "transparent",
          borderColor: r.backgroundColor,
          borderStyle: "solid",
          borderWidth: "1px",
          "&:hover": {
            backgroundColor: o("interaction.muted.brand.hover")
          },
          "&:active": {
            backgroundColor: o("interaction.muted.brand.active")
          },
          "&:disabled": {
            color: o("interaction.support.disabled.medium"),
            borderColor: o("interaction.support.disabled.medium")
          }
        },
        [`.btn-${t}-ghost`]: {
          color: r.backgroundColor,
          background: "transparent",
          borderColor: r.backgroundColor,
          "&:hover": {
            backgroundColor: o("interaction.muted.brand.hover")
          },
          "&:active": {
            backgroundColor: o("interaction.muted.brand.active")
          },
          "&:disabled": {
            color: o("interaction.support.disabled.medium")
          }
        }
      }),
      d
    )
  };
}, b = {
  getComponents: i
};
export {
  b as TailwindButton
};
