import styled from "styled-components";

const ModalContent = styled.div`
  display: flex;
  flex-direction: column;
  padding: ${(p) => p.theme.spacing.m};
  p {
    margin-bottom: ${(p) => p.theme.spacing.m};
  }
`;

const QRWrapper = styled.div`
  padding-top: ${(p) => p.theme.spacing.xs};
  margin: auto;
`;

const ProfileWrapper = styled.div`
  display: flex;
  flex-direction: column;
`;

const Header = styled.div`
  height: 160px;
  width: 100%;
`;

const HeaderContent = styled.div`
  max-width: 720px;
  margin: auto;
  display: flex;
  align-items: center;
  height: 100%;
  gap: ${(p) => p.theme.spacing.m};
`;

const AvatarWrapper = styled.div``;

const UserName = styled.div``;

const NameTitle = styled.div`
  ${(p) => p.theme.textStyle.headingM};
  color: ${(p) => p.theme.color.textHighEmphasis};
`;

const SubTitle = styled.div`
  ${(p) => p.theme.textStyle.headingXS};
  color: ${(p) => p.theme.color.textMediumEmphasis};
  margin-bottom: ${(p) => p.theme.spacing.xxs};
`;

const TabsWrapper = styled.div`
  background-color: ${(p) => p.theme.color.uiBackground02};
  border-top: ${(p) => `1px solid ${p.theme.color.uiLine}`};
  border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
  div {
    max-width: 720px;
    margin: 0 auto;
    border-bottom: none;
  }
`;

const Content = styled.div`
  max-width: 720px;
  margin: auto;
  width: 100%;
`;

const UserForm = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: ${(p) => `calc(${p.theme.spacing.m} + ${p.theme.spacing.xs})`};
  align-items: start;
  padding-top: ${(p) => `calc(${p.theme.spacing.m} + ${p.theme.spacing.xs})`};
`;

const FormColumn = styled.div``;

const UserPermissions = styled.div`
  padding-top: ${(p) => p.theme.spacing.s};
`;

export {
	ModalContent,
	QRWrapper,
	ProfileWrapper,
	Header,
	HeaderContent,
	TabsWrapper,
	Content,
	NameTitle,
	SubTitle,
	AvatarWrapper,
	UserName,
	UserForm,
	FormColumn,
	UserPermissions,
};
