import styled from "styled-components";

import SummaryButton from "../Fields/SummaryButton";
import Tag from "../Tag";

const Wrapper = styled.div``;

const KeywordsWrapper = styled.div`
  padding: ${(p) => `${p.theme.spacing.m} ${p.theme.spacing.m} 80px ${p.theme.spacing.s}`};
  overflow-y: auto;
  height: 100%;
  width: 100%;
  position: relative;

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

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

const KeywordsListWrapper = styled.div``;

const FilterWrapper = styled.div`
  display: flex;
  background-color: ${(p) => p.theme.color.uiBackground03};
  width: 100%;
  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.xs}`};
  align-items: center;
  border-radius: ${(p) => p.theme.radii.s};
  margin-bottom: ${(p) => p.theme.spacing.xs};
`;

const FilterText = styled.div`
  ${(p) => p.theme.textStyle.uiS};
  color: ${(p) => p.theme.color.textHighEmphasis};
  margin-right: ${(p) => p.theme.spacing.xs};
  flex-shrink: 0;
`;

const StyledTag = styled(Tag)`
  margin-right: ${(p) => p.theme.spacing.xs};
  margin-bottom: 0;
`;

const TagList = styled.div``;

const AddKeywordButton = styled.button`
  display: flex;
  ${(p) => p.theme.textStyle.fieldLabel};
  color: ${(p) => p.theme.colors.interactive01};
  min-height: 40px;
  width: 100%;
  border: ${(p) => `1px dashed ${p.theme.colors.interactive01}`};
  border-radius: ${(p) => p.theme.radii.s};
  align-items: center;
  justify-content: center;
  svg {
    margin-right: ${(p) => p.theme.spacing.xxs};
  }
`;

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

const StyledSummaryButton = styled(SummaryButton)`
  margin-bottom: ${(p) => p.theme.spacing.xs};
`;

export {
	Wrapper,
	KeywordsWrapper,
	KeywordsListWrapper,
	FilterWrapper,
	FilterText,
	StyledTag,
	TagList,
	AddKeywordButton,
	ModalContent,
	StyledSummaryButton,
};
