import styled from "styled-components";

const Content = styled.div`
  display: flex;
  padding: ${(p) => `${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.s}`};
  flex-grow: 1;
  flex-direction: column;
  position: relative;
  overflow: hidden;
`;

const ModalFooter = styled.div`
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgb(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: flex-end;
  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
  button:not(:first-child) {
    margin-left: ${(p) => p.theme.spacing.s};
  }
  border-radius: 0 0 4px 4px;
  z-index: 2;
`;

const DataWrapper = styled.div`
  display: flex;
  flex-direction: column;
  flex-grow: 2;
  height: 100%;
`;

const DataTitle = styled.div<{ hasBold: boolean }>`
  ${(p) => (p.hasBold ? p.theme.textStyle.headingM : p.theme.textStyle.headingS)};
  margin-bottom: ${(p) => p.theme.spacing.m};
`;

const ImporterContent = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: ${(p) => p.theme.spacing.m};
  width: 100%;
  height: 476px;

  & > div:first-child {
    width: 524px;
  }
`;

const ColumnWrapper = styled.div`
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-right: ${(p) => p.theme.spacing.xxs};
  padding-bottom: ${(p) => p.theme.spacing.l};

  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 2px;
    height: 100%;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: ${(p) => p.theme.color.iconNonActive};
  }
`;

const CheckAll = styled.div`
  display: flex;
  align-items: center;
  border: 1px solid ${(p) => p.theme.color.uiLine};
  border-radius: ${(p) => p.theme.radii.s};
  padding: 14px 10px 14px 16px;
  margin-right: ${(p) => p.theme.spacing.xs};
`;

const PageList = styled.div`
  padding-left: 1px;
`;

const SelectedWrapper = styled.div`
  border: 1px solid ${(p) => p.theme.color.uiLine};
  border-radius: ${(p) => p.theme.radii.s};
  padding: ${(p) => p.theme.spacing.s};
  width: 100%;
`;

const SelectedList = styled.div``;

const SelectedInfo = styled.div`
  ${(p) => p.theme.textStyle.uiS};
  color: ${(p) => p.theme.color.textMediumEmphasis};
`;

const SelectedTitle = styled.div`
  ${(p) => p.theme.textStyle.uiL};
  color: ${(p) => p.theme.color.textMediumEmphasis};
  margin-bottom: ${(p) => p.theme.spacing.s};
`;

const SelectedItem = styled.div`
  margin-bottom: ${(p) => p.theme.spacing.s};
  display: flex;
  align-items: center;

  &:last-child {
    margin-bottom: 0;
  }
`;

const SelectedName = styled.div`
  ${(p) => p.theme.textStyle.uiL};
  color: ${(p) => p.theme.color.textHighEmphasis};
  font-weight: 400;
`;

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

const SearchWrapper = styled.div`
  display: flex;
  margin: ${(p) => `${p.theme.spacing.xs} 0`};
`;

const EmptyStateWrapper = styled.div`
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
`;

const LoadingWrapper = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
`;

export {
	Content,
	ModalFooter,
	DataWrapper,
	DataTitle,
	ImporterContent,
	ColumnWrapper,
	PageList,
	SelectedList,
	CheckAll,
	SelectedTitle,
	SelectedItem,
	IconWrapper,
	SearchWrapper,
	SelectedWrapper,
	SelectedName,
	SelectedInfo,
	EmptyStateWrapper,
	LoadingWrapper,
};
