import { mapAndReduceOver as i } from "../../utils/map-helper.js";
const u = (t) => {
  const { spacing: e, color: o, get: n } = t, c = {
    primary: {
      color: o("content.inverse.strong"),
      backgroundColor: o("interaction.default"),
      hoverColor: o("primary.70"),
      pressedColor: o("primary.80"),
      outlineHoverBackgroundColor: o("interaction.muted.brand.hover"),
      outlineActiveBackgroundColor: o("interaction.muted.brand.active")
    },
    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")
    },
    black: {
      color: o("brand.white"),
      backgroundColor: o("brand.black"),
      hoverColor: o("grey.90"),
      pressedColor: o("grey.80")
    }
  }, d = {
    borderStyle: "solid",
    borderWidth: "1px",
    borderColor: o("grey.30"),
    outlineTextColor: o("content.primary"),
    outlineBackgroundColor: o("surface.alt")
  }, l = {
    singpass: {
      color: o("brand.white"),
      backgroundColor: o("brand.singpass-red"),
      hoverColor: o("red.70"),
      pressedColor: o("red.80"),
      ...d
    },
    corppass: {
      color: o("brand.white"),
      backgroundColor: o("brand.corppass-blue"),
      hoverColor: o("blue.70"),
      pressedColor: o("blue.80"),
      ...d
    }
  };
  return {
    ".btn": {
      padding: e(3, 4),
      borderRadius: e(1.5),
      fontWeight: "600",
      transitionProperty: "background-color",
      transitionDuration: n("transitionDuration.default"),
      transitionTimingFunction: n("transitionTimingFunction.default"),
      display: "flex",
      flexDirection: "row",
      alignItems: "center",
      gap: e(1),
      "&.size-sm": {
        padding: e(2, 3),
        fontSize: n("fontSize.sm")
      },
      "&.size-xs": {
        padding: e(0.5, 2),
        fontSize: n("fontSize.sm")
      },
      "&.size-md": {
        padding: e(3, 4),
        fontSize: n("fontSize.body")
      },
      "&.size-lg": {
        padding: e(5, 6),
        fontSize: "18px"
      }
    },
    ".btn:hover": {
      cursor: "pointer"
    },
    ".btn .btn-icon": {
      width: e(6),
      height: e(6)
    },
    ".btn.size-sm .btn-icon, .btn.size-xs .btn-icon": {
      width: e(5),
      height: e(5)
    },
    ...i(
      (a, r) => ({
        [`.btn-${a}`]: {
          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-${a}-outline`]: {
          color: r.outlineTextColor ?? r.backgroundColor,
          background: r.outlineBackgroundColor ?? "transparent",
          borderColor: r.borderColor ?? r.backgroundColor,
          borderStyle: r.borderStyle ?? "solid",
          borderWidth: r.borderWidth ?? "1px",
          "&:hover": {
            backgroundColor: r.outlineHoverBackgroundColor ?? o("interaction.muted.generic.hover")
          },
          "&:active": {
            backgroundColor: r.outlineActiveBackgroundColor ?? o("interaction.muted.generic.active")
          },
          "&:disabled": {
            color: o("interaction.support.disabled.medium"),
            borderColor: o("interaction.support.disabled.medium")
          }
        },
        [`.btn-${a}-ghost`]: {
          color: r.backgroundColor,
          background: "transparent",
          borderColor: r.backgroundColor,
          "&:hover": {
            backgroundColor: r.outlineHoverBackgroundColor ?? o("interaction.muted.generic.hover")
          },
          "&:active": {
            backgroundColor: r.outlineActiveBackgroundColor ?? o("interaction.muted.generic.active")
          },
          "&:disabled": {
            color: o("interaction.support.disabled.medium")
          }
        }
      }),
      { ...c, ...l }
    )
  };
}, s = {
  getComponents: u
};
export {
  s as TailwindButton
};
