import styled from "styled-components"; import { lighten } from "polished"; export const Container = styled.div` width: 300px; height: 48px; margin-top: 8px; margin-bottom: 8px; transition: 0.2s; color: #284f00; &:hover { transform: scaleX(1.04); color: ${lighten(0.2, "#284f00")}; svg { color: ${lighten(0.2, "#284f00")}; } } `; export const InputContainer = styled.div` display: flex; align-items: center; border-left: none; border-right: none; border-top: none; border-bottom: 2px solid #284f00; transition: 0.2s; &:hover { border-bottom: 2px solid ${lighten(0.2, "#284f00")}; } svg { color: #284f00; } `; export const Input = styled.input` width: 300px; border: none; margin-left: 2px; font-size: 18px; color: #41414d; &:focus { outline: none; } `; export const Label = styled.div` height: 22px; font-weight: 500; font-family: Roboto, sans-serif; `;