import { styled } from "@mui/material/styles";
import { MuiChipsInput } from "mui-chips-input";

export const ChipsInput = styled(MuiChipsInput)(({ theme }) =>
  theme.unstable_sx({
    bgcolor: "background.paper",
    border: "1px solid",
    borderColor: "divider",
    borderRadius: 12,
    width: "100%",
    maxWidth: 600,
    pl: 5,
    px: 2,

    "& .MuiOutlinedInput-root": {
      width: "100%",
      px: 5,
      py: 1,
      flexWrap: "nowrap",
      overflowX: "auto",
      "& fieldset": { border: 0 },
      "&.Mui-focused fieldset": {
        border: 0,
        borderColor: "secondary.main",
      },
    },
  }),
);

export default ChipsInput;