Search box transition effect in CSS

                            <div class="search_box_container">
		<div class="search_box">
			<div class="pr">
				<input type="text" placeholder="Type to Search...">
				<button><i class="fa fa-search"></i></button>
			</div>
		</div>
	</div>
                        

                            body{
			margin: 0;
		}
		.search_box_container{
			display: flex;
			height: 100vh;
			width: 100%;
			pointer-events: none; 
			transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
		}

		.search_box{
			margin: auto;
		}

		.search_box input{ 
			width: 0;
			height: 35px;
			border-radius: 25px;
			border: none;
			background: #eee;
			padding: 3px 20px;
			transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
		}

		.search_box input:focus{ 
			outline: none;
		}


		.search_box button{
			position: absolute;
			right: 0;
			top: 0;
			width: 40px;
			border-radius: 50%;
			height: 40px;
			border: none;
			background: #bb00dc;
			color: white;
		}

		.pr{
			pointer-events: auto; 
		}

		.search_box_container .pr:hover { 
			
		} 

		.pr:hover  > input{
			width: 200px;
		}


		.pr:hover  .search_box_container{
			background: #5c5c5c;
		}
		
		.search_box_container:hover { 
			background-color: rgb(87 87 87); 
		} 

		

		.pr{
			position: relative;
			cursor: pointer;
		}