/** @format */ import styled from 'styled-components'; const Block = styled.div` background-color: #a6bdf438; backdrop-filter: blur(10px); box-shadow: 0px 0px 20px #00000047; /* border: 3px solid green; */ z-index: 998; box-sizing: border-box; padding: 5px 15px 5px 10px; position: fixed; bottom: 1px; height: 62px; width: 250px; /* background-color: #fff; */ /* border-radius: 13px; */ border-top-left-radius: 13px; border-bottom-left-radius: 13px; transition: 0.3s; right: ${({ hidden }) => (hidden ? '52px' : '-270px')}; display: grid; grid-template-rows: 1fr 1fr; grid-row-gap: 5px; .top { display: flex; align-items: center; justify-content: center; } .bottom { display: flex; align-items: center; justify-content: center; gap: 15px; } .call_text { text-shadow: 1px 1px 1px #000; color: #fff; padding: 0; margin: 0; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .timer { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #fff; font-weight: bold; font-size: 18px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .phone_text { font-weight: bold; color: green; text-shadow: 1px 1px 1px #000; } .button { max-width: 100px; width: 100%; padding: 5px 0px; border-radius: 5px; font-size: 14px; font-weight: bold; cursor: pointer; } .light_blue { background-color: #d2f95fc2; border: 0; color: #333; } .red { background-color: #ff0505c2; border: 0; color: #fff; } `; export default Block;