| import styled from "styled-components"; | import styled from "styled-components"; | ||||
| import { Box } from "@mui/material"; | import { Box } from "@mui/material"; | ||||
| import selectedTheme from "../../../themes"; | |||||
| export const AutoSuggestTextFieldContainer = styled(Box)` | export const AutoSuggestTextFieldContainer = styled(Box)` | ||||
| & .react-autosuggest__container { | & .react-autosuggest__container { | ||||
| width: 100%; | |||||
| height: 48px; | |||||
| position: relative; | |||||
| z-index: 20; | |||||
| & input { | |||||
| width: 100%; | |||||
| height: 48px; | |||||
| padding: 4px 14px; | |||||
| border-radius: 4px; | |||||
| border: 1px solid rgba(0, 0, 0, 0.23); | |||||
| outline-width: 0; | |||||
| background-color: initial; | |||||
| font-family: "DM Sans"; | |||||
| font-size: 16px; | |||||
| padding-bottom: 6px; | |||||
| } | |||||
| & input:hover { | |||||
| border: 1px solid rgba(0, 0, 0, 0.87); | |||||
| } | |||||
| & input:focus-visible { | |||||
| border: 2px solid ${selectedTheme.primaryPurple}; | |||||
| } | |||||
| & div ul li { | |||||
| background-color: white; | |||||
| } | |||||
| } | } | ||||
| `; | `; |