import styled from "styled-components";

const LeftPanel = styled.section`
  position: relative;
  flex-grow: 1;
  min-width: 620px;
`;

const RightPanel = styled.section`
  display: flex;
  position: relative;
  padding: ${(p) => `0 ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
  flex-shrink: 0;
  min-width: 368px;
  max-width: ${(p) => `calc(100% - 620px - ${p.theme.spacing.m})`};
  flex-direction: column;
`;

const FixedPanel = styled.div<{ full: boolean }>`
  position: sticky;
  top: ${(p) => (p.full ? p.theme.spacing.xl : `calc(${p.theme.spacing.xl} + ${p.theme.spacing.m})`)};
  height: ${(p) =>
		p.full
			? `calc(100vh - ${p.theme.spacing.xl})`
			: `calc(100vh - (${p.theme.spacing.xl} + (${p.theme.spacing.m} * 2)) - (${p.theme.spacing.m} + (${p.theme.spacing.xs} * 2)))`};
  margin-left: ${(p) => (p.full ? "0" : p.theme.spacing.m)};
`;

export { LeftPanel, RightPanel, FixedPanel };
