import styled from 'styled-components'
import theme from 'theme'

export const DropDownWrapper = styled.div`
  border: 1px solid ${theme.colors['blue-cyan']};
  border-radius: 3px;
  display: inline-block;

  &::after {
    color: ${theme.colors['blue-cyan']};
    content: '⌄';
  }
`

export const DropdownInput = styled.select`
  appearance: none;
  background: transparent;
  border: none;
  color: ${theme.colors['blue-cyan']};
  font: ${theme.textStyles.boxTitle.font};
  font-size: ${theme.fontSizes.xl};
  height: 29px;
  outline: none;
  padding: 3px 7px 4px 12px;
  text-transform: uppercase;
  width: 167px;
`
