Select.tsx

import styled from 'styled-components'
import { fonts } from 'style/fonts'
import { distance, fontSizes } from 'style/sizes'

const Select = styled.select.attrs({type: 'text'})`
    font-family: ${fonts.default};
    background-color: ${({theme}) => theme.colors.backgroundInput};
    color: ${({theme}) => theme.colors.primary};
    display: block;
    width: 100%;
    border-radius: 3px;
    border: 0px solid ${({theme}) => theme.colors.secondary};
    padding: ${distance.small};
    margin-bottom: ${distance.medium};
    font-size: ${fontSizes.text};
    &:disabled {
        opacity: 0.4;
    }
    /* to prevent white background when using autocomplete */
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill:active  {
        -webkit-text-fill-color: ${({theme}) => theme.colors.primary};
        caret-color: ${({theme}) => theme.colors.primary};
        transition: background-color 500000s ease-in-out 0s;
    }
`

export default Select