import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: ${(p) => `32px ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
`;

const InfoWrapper = styled.div`
  width: 450px;
  margin-left: 85px;
  margin-bottom: ${(p) => p.theme.spacing.m};
`;

const Title = styled.div`
  ${(p) => p.theme.textStyle.headingM};
  margin-bottom: ${(p) => p.theme.spacing.xs};
`;

const Text = styled.div`
  ${(p) => p.theme.textStyle.uiS};
  font-weight: 400;
`;

const Actions = styled.div`
  display: flex;
  gap: ${(p) => p.theme.spacing.s};
  justify-content: flex-end;
  margin-top: auto;
`;

const FormWrapper = styled.div`
  display: flex;
  margin-left: 85px;
  margin-top: ${(p) => p.theme.spacing.xs};
  gap: ${(p) => p.theme.spacing.l};
`;

const FormImage = styled.div`
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
`;

const FormFields = styled.div`
  width: 344px;
`;

export { Wrapper, InfoWrapper, Title, Text, Actions, FormWrapper, FormImage, FormFields };
