import styled from 'styled-components';

import { DropdownWrapper } from '../Dropdown/StyledDropdown';

const SelectWrapper = styled.div`
  position: relative;
  margin: 0;
  padding: 0;

  &:focus {
    outline: none;
  }

  & > ${DropdownWrapper} {
    display: block;
  }
`;

const MenuWrapper = styled.div`
  overflow-y: auto;
  max-height: ${({ theme }) => theme.sizes.select.menuMaxHeight};
  margin: 0;
  padding: 0;
`;

const CategoryWrapper = styled.div`
  margin: 0;
  padding: ${({ theme }) => theme.space.select.menuCategoryPadding};
  font-size: ${({ theme }) => theme.fontSizes.select.menuCategory};
  line-height: ${({ theme }) => theme.lineHeights.select.menuCategory};
`;

const HelpTextWrapper = styled.div`
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
`;

const CheckmarkWrapper = styled.div<{ shown: boolean }>`
  display: inline-flex;
  margin: 0;
  padding: 0;
  margin-left: ${({ theme }) => theme.space.select.menuCheckmarkMarginLeft};
  opacity: ${({ shown }): number => (shown ? 1 : 0)};
`;

const StyledSuffixIconWrapper = styled.div`
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
`;

const StyledLoadingIconWrapper = styled.div`
  display: flex;
  margin: 0;
  padding: 0;
  padding-right: ${({ theme }) => theme.space.select.loadingIconPaddingRight};
`;

export {
  SelectWrapper,
  MenuWrapper,
  CategoryWrapper,
  HelpTextWrapper,
  CheckmarkWrapper,
  StyledSuffixIconWrapper,
  StyledLoadingIconWrapper,
};