import styled from 'styled-components';

const DropdownWrapper = styled.div<{ themeDisplay: 'inline-block' | 'block' }>`
  position: relative;
  display: ${({ themeDisplay }) => themeDisplay};
  margin: 0;
  padding: 0;
`;

const DropdownPopper = styled.div<{ open: boolean }>`
  visibility: ${({ open }): string => (open === true ? 'visible' : 'hidden')};
  z-index: 99;
  margin: 0;
  padding: 0;
`;

const ContentWrapper = styled.div`
  box-shadow: ${({ theme }) => theme.shadows.dropdown.default};
  border-radius: ${({ theme }) => theme.radii.dropdown.default};
  overflow: hidden;
  background: ${({ theme }) => theme.colors.dropdown.background};
  margin: 0;
  padding: 0;

  > *:first-child {
    border-top-right-radius: ${({ theme }) => theme.radii.dropdown.default};
    border-top-left-radius: ${({ theme }) => theme.radii.dropdown.default};
  }

  > *:last-child {
    border-bottom-right-radius: ${({ theme }) => theme.radii.dropdown.default};
    border-bottom-left-radius: ${({ theme }) => theme.radii.dropdown.default};
  }
`;

export { DropdownWrapper, DropdownPopper, ContentWrapper };