import { makeStyles } from "@material-ui/styles";

export default makeStyles((theme) => ({
  container: {
    height: "100vh",
    width: "100vw",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    position: "absolute",
    top: 0,
    left: 0
  },
  error: {
    backgroundColor: theme.palette.error.dark
  },
  success: {
    backgroundColor: theme.palette.success.light
  },
  imageFrame: {
    display: "flex",
    alignItems: "center",
    marginBottom: theme.spacing(2)
  },
  image: {
    width: 200,
    marginRight: theme.spacing(2)
  },
  paperRoot: {
    backgroundColor: theme.palette.common.black,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    paddingTop: theme.spacing(2),
    paddingBottom: theme.spacing(2),
    paddingLeft: theme.spacing(2),
    paddingRight: theme.spacing(2),
    maxWidth: 404
  },
  textRow: {
    marginBottom: theme.spacing(4),
    textAlign: "center"
  },
  safetyText: {
    fontWeight: 300,
    color: theme.palette.text.hint
  },
  singleText: {
    fontWeight: 300,
    color: theme.palette.info.main
  },
  button: {
    backgroundColor: theme.palette.error.dark,
    textTransform: "none",
    fontSize: 22
  }
}));
