import styled, { StyledComponent } from '@emotion/styled';
import { DropdownProps } from '../dropdown.types';

import { space, colors, fontSizes } from 'utils/theme';
import { Z_INDEX } from 'utils/constants/z-indexes';

export const Dropdown: StyledComponent<any, any, any> = styled.div`
  position: relative;

  width: ${(props: any): string => props.maxWidth ? '100%' : 'auto'};

  &:before {
    content: '';
    position: absolute;
    height: 94%;
    width: 50px;
    right: 1px;
    top: 1px;
    z-index: ${Z_INDEX.FORM_UI};
    pointer-events: none;
  }
`;

export const Arrow = styled.span`
  position: absolute;
  right: 20px;
  top: 50%;
  line-height: 0;
  transform: translateY(-50%);
  pointer-events: none;
`;

export const Select: StyledComponent<any, any, any> = styled.select`
  width: 100%;
  padding: 8px 60px 8px 20px;
  font-size: ${(props: DropdownProps): any  => fontSizes[props.fontSize || 14]};
  border: none;
  color: ${colors.textDark};
  appearance: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  direction: ltr;
  font-weight: bold;
  option {
    direction: ltr;
  }
`;