import { styled} from "@mui/material/styles";
import {
	Stack,
	Card as MuiCard
} from "@mui/material";
// eslint-disable-next-line @typescript-eslint/no-redeclare, @typescript-eslint/no-unused-vars
export const Card = styled(MuiCard)(({ theme }) => ({
	display: "flex",
	flexDirection: "column",
	alignSelf: "center",
	width: "100%",
	padding: theme.spacing(4),
	gap: theme.spacing(2),
	margin: "16px",
	backgroundColor: "#1E1F1F",
	[theme.breakpoints.up("sm")]: {
		maxWidth: "450px",
	},
}));

export const SignInContainer = styled(Stack)(() => ({
	height: "calc((1 - var(--template-frame-height, 0)) * 100dvh)",
	minHeight: "100%",
	"&::before": {
		content: '""',
		display: "block",
		position: "absolute",
		zIndex: -1,
		inset: 0,
	},
}));
