/** @format */ import styled from 'styled-components'; const Block = styled.div` transition: 0.3s; ${({ hiddenState }) => hiddenState ? { width: '0', height: '0', padding: '0', } : { width: '280px', height: '250px', padding: '60px 3px 5px 0', }} position: absolute; bottom: 45px; left: 50%; transform: translate(-50%, 0); background-color: #232932f2; border-radius: 10px; /* width */ ::-webkit-scrollbar { width: 10px !important; } /* Track */ ::-webkit-scrollbar-track { background: #ffffff00 !important; } /* Handle */ ::-webkit-scrollbar-thumb { background: #ffffff4a !important; border-radius: 20px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #ffffff4a !important; } `; Block.Inset = styled.div` ${({ hiddenState }) => (hiddenState ? { padding: '0' } : { padding: '5px' })} padding: 0 2px 0 5px; height: 100%; width: 100%; overflow-y: scroll; border-radius: 10px; display: grid; grid-template-columns: 1fr; grid-gap: 5px; `; Block.Section = styled.div` border-radius: 15px; width: 100%; height: 30px; background-color: #ffffff8a; padding: 0 8px; display: grid; grid-template-columns: 1fr 30px; align-items: center; grid-gap: 10px; p { margin: 0; padding: 0; } display: flex; justify-content: space-between; .name { font-size: 14px; } .phone_number { font-size: 12px; background-color: #a0c13d; padding: 2px 5px; min-width: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; } `; Block.Input = styled.input` ${({ hiddenState }) => hiddenState ? { display: 'none' } : { display: 'block' }} color: #fff; position: absolute; width: 258px; height: 40px; top: 3px; background-color: #ffffff1c; transform: translate(5px, 10px); border-radius: 10px; padding: 3px; font-size: 20px; :focus { border-color: inherit; -webkit-box-shadow: none; box-shadow: none; padding: 0 10px; font-size: 24px; outline: 0 none; } outline: none; &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ &[type='number'] { -moz-appearance: textfield; } `; export default Block;