import {
  AppBar,
  Button,
  Toolbar,
  Typography,
  Box,
  TextField,
  InputLabel,
} from "@mui/material";
import { styled } from "@mui/system";

export const AppContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  flexDirection: 'column',
  width: "100vw",
  background: "rgba(39, 40, 44, 1)",
  height: "100vh",
  radius: "15px"
}));
export const AuthenticatedContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  width: "100%",
  height: "100%",
  justifyContent: "space-between"
}));
export const AuthenticatedContainerInnerLeft = styled(Box)(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  flexDirection: 'column',
  height: "100%",
  width: "100%"
}));
export const AuthenticatedContainerInnerRight = styled(Box)(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  flexDirection: 'column',
  width: "60px",
  height: "100%",
  background: "rgba(0, 0, 0, 0.1)"

}));

export const TextP = styled(Typography)(({ theme }) => ({
  fontSize: "13px",
  fontWeight: 600,
  fontFamily: "Inter",
  color: "white"
}));

export const TextItalic = styled("span")(({ theme }) => ({
  fontSize: "13px",
  fontWeight: 600,
  fontFamily: "Inter",
  color: "white",
  fontStyle: "italic"
}));

export const TextSpan = styled("span")(({ theme }) => ({
  fontSize: "13px",
  fontFamily: "Inter",
  fontWeight: 800,
  color: "white"
}));

export const AddressBox = styled(Box)`
display: flex;
border: 1px solid var(--50-white, rgba(255, 255, 255, 0.5));
justify-content: space-between;
align-items: center;
width: 132px;
height: 25px;
padding: 5px 15px 5px 15px;
gap: 5px;
border-radius: 100px;
font-family: Inter;
font-size: 12px;
font-weight: 600;
line-height: 14.52px;
text-align: left;
color: var(--50-white, rgba(255, 255, 255, 0.5));
cursor: pointer;
transition: all 0.2s;
&:hover {
    background-color: rgba(41, 41, 43, 1);
    color: white;
    svg path {
      fill: white; // Fill color changes to white on hover
    }
  }

`

export const CustomButton = styled(Box)`

/* Authenticate */

box-sizing: border-box;

padding: 15px 20px;
gap: 10px;


border: 0.5px solid rgba(255, 255, 255, 0.5);
filter: drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3));
border-radius: 5px;

  display: inline-flex;

  justify-content: center;
  align-items: center;

  width: fit-content;
  transition: all 0.2s;
  color: black;
  min-width: 160px;
  cursor: pointer;
  font-weight: 600;
  font-family: Inter;
  color: white;
  text-align: center;
  &:hover {
    background-color: rgba(41, 41, 43, 1);
    color: white;
    svg path {
      fill: white; // Fill color changes to white on hover
    }
  }
`;


export const CustomInput = styled(TextField)({
  width: "183px", // Adjust the width as needed
  borderRadius: "5px",
  // backgroundColor: "rgba(30, 30, 32, 1)",
  outline: "none",
  input: {
    fontSize: 10,
    fontFamily: "Inter",
    fontWeight: 400,
    color: "white",
    "&::placeholder": {
      fontSize: 16,
      color: "rgba(255, 255, 255, 0.2)",
    },
    outline: "none",
    padding: "10px",
  },
  "& .MuiOutlinedInput-root": {
    "& fieldset": {
      border: '0.5px solid rgba(255, 255, 255, 0.5)',
    },
    "&:hover fieldset": {
     border: '0.5px solid rgba(255, 255, 255, 0.5)',
    },
    "&.Mui-focused fieldset": {
     border: '0.5px solid rgba(255, 255, 255, 0.5)',
    },
  },
  "& .MuiInput-underline:before": {
    borderBottom: "none",
  },
  "& .MuiInput-underline:hover:not(.Mui-disabled):before": {
    borderBottom: "none",
  },
  "& .MuiInput-underline:after": {
    borderBottom: "none",
  },
});

export const CustomLabel = styled(InputLabel)`
  font-weight: 400;
  font-family: Inter;
  font-size: 10px;
  line-height: 12px;
  color: rgba(255, 255, 255, 0.5);

`