import styled from "styled-components";
import { ToggleField } from "@ax/components";

const Wrapper = styled.div`
  display: flex;
  height: 100%;
`;

const ContentWrapper = styled.div`
  display: flex;
  overflow: auto;
  flex-direction: column;
  width: 100%;
`;

const FormWrapper = styled.div`
  width: 720px;
  margin: ${(p) => `${p.theme.spacing.m} 0 0 ${p.theme.spacing.m}`};
`;

const ModalContent = styled.div`
  padding: ${(p) => p.theme.spacing.m};
`;

const ButtonWrapper = styled.div`
  margin-bottom: ${(p) => p.theme.spacing.m};
  margin-top: ${(p) => `-${p.theme.spacing.xs}`};
`;

const SectionWrapper = styled.div`
  border-top: 1px solid ${(p) => p.theme.color.uiLine};
  padding-top: ${(p) => p.theme.spacing.m};
`;

const Heading = styled.div`
  ${(p) => p.theme.textStyle.headingXS};
  color: ${(p) => p.theme.color.textHighEmphasis};
  margin-bottom: ${(p) => p.theme.spacing.xs};
`;

const Description = styled.div`
  ${(p) => p.theme.textStyle.uiM};
  color: ${(p) => p.theme.color.textMediumEmphasis};
  margin-bottom: ${(p) => p.theme.spacing.m};
`;

const RobotsWrapper = styled.div`
  display: flex;
`;

const ColumnsWrapper = styled.div`
  display: flex;
  gap: ${(p) => p.theme.spacing.m};
`;

const IconWrapper = styled.div`
  width: ${(p) => p.theme.spacing.s};
  height: ${(p) => p.theme.spacing.s};
  margin-right: ${(p) => p.theme.spacing.xs};
`;

const HiddenFieldWrapper = styled.div`
  display: flex;
  ${(p) => p.theme.textStyle.uiS};
  color: ${(p) => p.theme.color.textMediumEmphasis};
  background-color: ${(p) => p.theme.color.uiBackground03};
  padding: ${(p) => p.theme.spacing.s};
  margin-bottom: ${(p) => p.theme.spacing.m};
  border-radius: ${({ theme }) => theme.radii.s};
`;

const StyledToggleField = styled(ToggleField)`
  margin-left: auto;
`;

export {
	Wrapper,
	ContentWrapper,
	FormWrapper,
	ModalContent,
	ButtonWrapper,
	Heading,
	SectionWrapper,
	Description,
	RobotsWrapper,
	ColumnsWrapper,
	IconWrapper,
	HiddenFieldWrapper,
	StyledToggleField,
};
