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

import hexToRgba from 'hex-rgba'

import theme from 'utils/theme';
import { Z_INDEX } from 'utils/constants/z-indexes';

export const Dropdown = styled.div`
  position: relative;
  background: white;

  width: ${(props: any) => 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: 11px 60px 11px 20px;
  font-size: ${(props: DropdownProps): any  => theme.fontSizes[props.fontSize || 14]};
  border: solid 1px ${theme.colors.textDark};
  border-color: ${hexToRgba(theme.colors.textDark, 50)};
  color: ${theme.colors.textDark};
  appearance: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
`;