import { styled } from "@mui/material";

const UlStyled = styled("ul")({
	display: "flex",
	flexDirection: "column",
	rowGap: "0.5em",
	margin: "0",
	paddingLeft: "0.5em",
	"&:not(:has(:nth-child(5)))": {
		"& .MuiDivider-root": {
			display: "none",
		},
	},
});

const LiStyled = styled("li")({
	display: "flex",
	alignItems: "center",
	columnGap: "0.5em",
	cursor: "pointer",
	"&:hover": {
		scale: "1.05",
	},
});

const Icon = styled("span")({
	backgroundColor: "#1E456F",
});

export default {
	Ul: UlStyled,
	Li: LiStyled,
	Icon,
};