import { createUseStyles } from "react-jss";

export const useCommonStyles = createUseStyles({
  input: {
    marginBottom: 24,
    marginTop: 8,
    height: 16,
    padding: 8,
    borderRadius: 6,
    border: "1px solid #fff",
  },
  table: {
    width: "100%",
    borderCollapse: "collapse",
    "& td,th": {
      textAlign: "left",
      padding: 8,
      wordBreak: "break-word",
    },
  },
  centeredContainer: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
  selectInput: {
    composes: "$input",
    height: "unset",
  },
  container: {
    display: "flex",
    flexDirection: "column",
    paddingRight: 16,
    paddingLeft: 16,
    marginTop: 24,
    overflow: "auto",
    height: "calc(100% - 80px)",
  },
  form: {
    display: "inherit",
    flexDirection: "inherit",
  },
  errorMessage: {
    marginTop: -20,
    marginBottom: 12,
    color: "var(--theia-errorForeground)",
  },
  button: {
    marginLeft: "unset !important",
    height: 40,
  },
  modal: {
    inset: 40,
    background: "var(--theia-editor-background)",
    overflow: "auto",
    borderRadius: 4,
    color: "var(--theia-foreground)",
    outline: "none",
    padding: 20,
    width: 680,
    height: 520,
    boxShadow: "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)",
  },
  overlay: {
    position: "fixed",
    inset: 0,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    background: "rgba(0,0,0,0.4)",
  },
  linkAction: {
    cursor: "pointer",
    "&:hover": {
      textDecoration: "underline",
    },
  },
});