/** @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;