1  import styled from 'styled-components'
 2  import { Colors } from '../constants/styles'
 3  import searchIcon from '../assets/images/search.svg'
 4  
 5  export const Input = styled.input`
 6    max-width: 420px;
 7    padding: 11px 20px;
 8    background: #f0f1f3;
 9    color: ${Colors.Black};
10    border-radius: 8px;
11    border: 1px solid ${Colors.GrayBorder};
12    outline: none;
13  
14    &:active,
15    &:focus {
16      border: 1px solid ${Colors.Violet};
17      caret-color: ${Colors.Violet};
18    }
19  
20    @media (max-width: 600px) {
21      max-width: 100%;
22    }
23  `
24  
25  export const Search = styled(Input)`
26    width: 270px;
27    height: 36px;
28    padding: 6px 36px;
29    font-size: 15px;
30    line-height: 22px;
31    background-image: url(${searchIcon});
32    background-size: 24px 24px;
33    background-repeat: no-repeat;
34    background-position: center left 10px;
35  
36    @media (max-width: 375px) {
37      width: 80%;
38      margin-right: 8px;
39    }
40  `