import styled, { css } from 'styled-components'; export const Wrapper = styled('div')<{ open: boolean }>` border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background-color: white; position: fixed; top: 60px; right: 10px; display: inline-flex; padding: 9px 16px; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.38); z-index: 2; transform: translateY(${(props) => (props.open ? '0' : '-120px')}); transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms; `; export const InputWrapper = styled.div` width: 230px; height: 34px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; overflow: hidden; background-color: ${({ theme }) => theme.colors['light-gray']}; display: flex; justify-content: space-between; align-items: center; padding: 10px; `; export const Input = styled.input` background-color: ${({ theme }) => theme.colors['light-gray']}; outline: none; border: none; width: 66%; height: 34px; box-sizing: border-box; padding: 0; `; export const ResultInfo = styled.span` display: block; width: 33%; text-align: right; `; export const ArrowButton = styled('button')<{ variant: string }>` height: 34px; width: 30px; outline: none; border: none; background-color: ${({ theme }) => theme.colors['light-gray']}; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; ${(props) => props.variant === 'top' ? css` margin-left: 1px; :after { content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; } :hover:after { border-bottom: 5px solid ${({ theme }) => theme.colors.black38}; } ` : css` border-top-right-radius: 4px; border-bottom-right-radius: 4px; margin-left: 1px; :after { content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid black; } :hover:after { border-top: 5px solid ${({ theme }) => theme.colors.black38}; } `} `; export const LoadingWrapper = styled.div` transform: scale(0.7); transform-origin: right; margin-top: 3px; `;