import { makeStyles } from "@saleor/macaw-ui";

const useStyles = makeStyles(
  theme => {
    const colAction: React.CSSProperties = {
      textAlign: "right",
      width: 130,
    };
    const colName: React.CSSProperties = {
      width: 220,
    };

    return {
      colAction: {
        "&:last-child": {
          ...colAction,
          paddingRight: theme.spacing(4),
        },
      },
      colActionHeader: {
        ...colAction,
      },
      colName: {
        ...colName,
      },
      colNameHeader: {
        ...colName,
      },
      colValue: {},
      actions: {
        "&&": {
          paddingBottom: theme.spacing(2),
          paddingTop: theme.spacing(2),
          paddingLeft: theme.spacing(4),
        },
      },
      content: {
        paddingBottom: 0,
        paddingTop: theme.spacing(),
      },
      emptyContainer: {
        paddingBottom: 0,
        paddingTop: 0,
      },
      expandBtn: {
        position: "relative",
        left: theme.spacing(1),
        top: -2,
        transition: theme.transitions.create("transform", {
          duration: theme.transitions.duration.shorter,
        }),
        border: 0,
      },
      header: {
        "&&": {
          paddingBottom: theme.spacing(1),
        },
      },
      input: {
        padding: theme.spacing(0.5, 2),
      },
      nameInput: {
        padding: `13px 16px`,
      },
      table: {
        marginTop: theme.spacing(2),
        tableLayout: "fixed",
      },
      rotate: {
        transform: "rotate(-180deg)",
      },
    };
  },
  {
    name: "Metadata",
  },
);

export default useStyles;
