const e = (i) => {
  const { get: t, spacing: o, color: n } = i;
  return {
    ".input": {
      flexShrink: 1,
      appearance: "none",
      height: o(12),
      fontSize: t("fontSize.body-sm")
    },
    "input.input, textarea.input": {
      backgroundColor: t("colors.surface.alt"),
      borderRadius: o(1.5),
      borderWidth: "1px",
      borderStyle: "solid",
      borderColor: n("interaction.sub-border"),
      padding: o(3, 4),
      outline: "none",
      transitionProperty: "border-color, box-shadow",
      transitionDuration: t("transitionDuration.default"),
      transitionTimingFunction: t("transitionTimingFunction.default"),
      "&:active,&:focus": {
        borderColor: n("interaction.default"),
        boxShadow: `0 0 1px 1px ${n("interaction.default")}`
      },
      "&::placeholder": {
        color: n("content.placeholder"),
        fontWeight: 400
      }
    },
    "input.input": {
      lineHeight: 2
    },
    "textarea.input": {
      minHeight: o(36)
    }
  };
}, r = {
  getComponents: e
};
export {
  r as TailwindInputComponents
};
