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

export const OuterContainer = styled("div")({
  display: "flex",
  justifyContent: "flex-end",
  padding: 15,
  cursor: "pointer",
});

export const CrossIconContainer = styled("div")({
  display: "flex",
  alignItems: "center",
  background: "#FFE8EC",
  borderRadius: 100,
  transform: "matrix(-1, 0, 0, 1, 0, 0)",
  height: 30,
  width: 30,
  justifyContent: "center",
});

export const CenterCrossIconContainer = styled("div")({
  border: "1px solid #D7282F",
  background: "#FFFFFF",
  borderRadius: 100,
  transform: "matrix(-1, 0, 0, 1, 0, 0)",
  height: 60,
  width: 60,
});

export const WarningHeaderStyle = {
  fontFamily: "Open Sans",
  fontStyle: "normal",
  fontWeight: "700",
  fontSize: "23px",
  lineHeight: "30px",
  color: "#231F20",
  textAlign: "center",
};

export const WarningTextStyle = {
  fontFamily: "Open Sans",
  fontStyle: "normal",
  fontWeight: "400",
  fontSize: "16px",
  lineHeight: "21px",
  color: "#4A4A4A",
  textAlign: "center",
};

export const closeIconStyle = {
  color: "#FF1A43",
  height: 50,
  width: 50,
  background: "#FFFFFF",
  border: " 1px solid #D7282F",
  borderRadius: "100px",
  transform: "matrix(-1, 0, 0, 1, 0, 0)",
};

export const warningIconStyle = {
  color: "#ffcc00",
  height: 50,
  width: 50,
  background: "#FFFFFF",
  border: " 1px solid #ffcc00",
  padding: '2px',
  borderRadius: "100px",
  transform: "matrix(-1, 0, 0, 1, 0, 0)",
};

export const CloseIconContainer = styled("div")({
  display: "flex",
  justifyContent: "center",
});