import { makeStyles } from "../theme";

const useStyles = makeStyles(
  (theme) => ({
    activeMenuLabel: {
      display: "flex",
    },
    container: {
      overflowX: "hidden",
      width: "100%",
    },
    containerSubMenu: {
      "&$container": {
        overflow: "hidden",
      },
    },
    content: {
      width: "50%",
    },
    icon: {
      marginRight: theme.spacing(2),
    },
    innerContainer: {
      display: "flex",
      position: "relative",
      right: 0,
      transition: theme.transitions.duration.short + "ms",
      width: "200%",
    },
    label: {
      fontWeight: "bold",
    },
    logo: {
      display: "block",
      marginBottom: theme.spacing(4),
    },
    menuItemBtn: {
      alignItems: "center",
      background: "none",
      border: "none",
      color: theme.palette.text.secondary,
      display: "flex",
      marginBottom: theme.spacing(3),
      padding: 0,
      textDecoration: "none",
    },
    root: {
      background: theme.palette.background.default,
      borderBottomRightRadius: 32,
      borderTopRightRadius: 32,
      padding: theme.spacing(3),
      width: 260,
    },
    secondaryContentActive: {
      right: "100%",
    },
    subMenuTopBar: {
      alignItems: "center",
      display: "flex",
      justifyContent: "space-between",
      marginBottom: theme.spacing(3),
    },
  }),
  {
    name: "SideBarDrawer",
  }
);

export default useStyles;