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``;

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 MapWrapper = styled.div`
  flex: 1;
  min-height: 0;

  svg {
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
  }
`;

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

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

const SelectWrapper = styled.div`
  width: 252px;
  margin-left: auto;
`;

export { Wrapper, InfoWrapper, Title, Text, MapWrapper, Actions, Header, SelectWrapper };
