import { styled } from "@mui/material/styles";
import { IconButton, TextField } from "@mui/material";
export const CustomIconButton = styled(IconButton)({
	backgroundColor: "transparent",
	"&:hover": {
		backgroundColor: "transparent",
	},
	"*:where([data-mui-color-scheme='light']) &": {
		backgroundColor: "transparent",
		border: "none",
	},
	color: "#D0E1E9",
});

// Custom TextField with different placeholder color
export const CustomTextField = styled(TextField)({
	"& .MuiInputBase-input::placeholder": {
		color: "#979c9e",
		opacity: 1,
		backgroundColor: "",
	},
	"& .MuiInputBase-root.Mui-focused .MuiInputBase-input::placeholder": {
		color: "darkgray",
	},
});
