1. import styled from 'styled-components'
2.  
3. export const SearchFormContainer = styled.form`
4.   display: flex;
5.   gap: 1rem;
6.  
7.   input {
8.     flex: 1;
9.     border-radius: 6px;
10.     border: 0;
11.     background: ${props => props.theme['gray-900']};
12.     color: ${props => props.theme['gray-300']};
13.     padding: 1rem;
14.     &::placeholder {
15.       color: ${props => props.theme['gray-500']};
16.     }
17.   }
18.   button {
19.     display: flex;
20.     align-items: center;
21.     gap: 0.75rem;
22.     border: 0;
23.     padding: 1rem;
24.     background: transparent;
25.     border: 1px solid ${props => props.theme['green-300']};
26.     color: ${props => props.theme['green-300']};
27.     font-weight: bold;
28.     border-radius: 6px;
29.     cursor: pointer;
30.  
31.     &:not(:disabled):hover {
32.       background: ${props => props.theme['green-500']};
33.       border-color: ${props => props.theme['green-500']};
34.       color: ${props => props.theme.white};
35.       transition: background-color 0.2s, color 0.2s, border-color 0.2s;
36.     }
37.  
38.     &:disabled {
39.       opacity: 0.5;
40.       cursor: not-allowed;
41.     }
42.   }
43. `
44.