<label class="input-container closed">
	<div class="shadow"></div>
	<div class="center">
		<input type="text" class="input" placeholder="Search">
	</div>
	<div class="sticks"></div>
</label>

@import 'https://fonts.googleapis.com/css?family=Catamaran';

html, body
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Catamaran', sans-serif;
}

body 
{
	--height: 50;
	--width: 300;
	--border: 5;
	--speed: 0.4;
	--ease: cubic-bezier(.85,.01,.4,.97);
	--color-bk: #6CD4FF; //#547AA5;
	
	background: var(--color-bk);
	display: flex;
	align-items: center;
	justify-content: center;
	
	transition-property: background;
	transition-duration: calc(var(--speed) * 1s);
	transition-timing-function: var(--ease);
	
	&:focus-within {
		--speed: 0.7;
		background-color: #63C1E8; //#456488;
	 }
}

::placeholder { color: rgba(white, 0.5); }
:-ms-input-placeholder { color: rgba(white, 0.5);}
::-ms-input-placeholder { color: rgba(white, 0.5);}

.input-container
{
	width: calc(var(--width) * 1px);
	height: calc(var(--height) * 1px);
	position: relative;
	cursor: pointer;
	transform: rotate(12deg) scale(0.7);
	
	transition-property: opacity, transform;
	transition-duration: calc(var(--speed) * 1s);
	transition-timing-function: var(--ease);
	
	.center
	{
		border: calc(var(--border) * 1px) solid white;
		border-left: none;
		border-right: none;
		width: 100%;
		height: calc(100% - var(--border) * 2px);
		transform: scalex(0);
		transition: inherit;
		background-color: var(--color-bk);
	}
	
	input
	{
		transition: inherit;
		width: calc(100% - var(--height));
		height: 100%;
		border: 0;
		outline: 0;
		color: white;
		background: transparent;
		font-size: 1.3rem;
		opacity: 0;
		padding: 0;
		margin: 0;
	}
	
	.shadow
	{
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 2em;
		top: 0;
		left: 0;
		box-shadow: 0px 10px 50px 0px rgba(0,0,0,0.1);
		transition: inherit;
		transform: scalex(0) translateY(-10px);
		opacity: 0;
	}
	
	&:after, &:before
	{
		z-index:1;
		content: '';
		transition: inherit;
		width: calc((var(--height) * 0.5px) - (var(--border) * 1px));
		height: calc((var(--height) * 1px) - (var(--border) * 2px));
		display: block;
		top: 0;
		border-color: white;
		position: absolute;
		background-color: var(--color-bk);
		border: calc(var(--border) * 1px) solid white;
	}
	
	&:before
	{
		right: 100%;
		border-radius: 2em 0 0 2em;
		border-right: none;
		transform: translateX(calc(var(--width) * 0.5px));
	}
	
	&:after
	{
		left: 100%;
		border-radius: 0 2em 2em 0;
		border-left: none;
		transform: translateX(calc(var(--width) * -0.5px));
	}
	
	.sticks
	{
		position: absolute;
		height: calc(var(--height) * 0.5px);
		width: 1px;
		bottom: 0;
		right: 0;
		transition: inherit;
		transition-duration: calc(var(--speed) * 1.25s);
		transform: translateX(calc((var(--width) - var(--height)) * -0.53px)) rotate(-45deg);
		z-index: 2;
		
		&:before, &:after
		{
			transition: transform calc(var(--speed) * 1s) var(--ease);
			height: calc(var(--height) * 0.5px);
			width: calc(var(--border) * 1px);
			position: absolute;
			content: '';
			background-color: white;
			left: calc(var(--border) * -0.5px);
			bottom: calc(var(--height) * -0.25px);
		}
	}
		
	&:focus-within
	{
		transform: rotate(0deg) translatey(-10px);
		.center{ transform: scalex(1); }
		.shadow{ transform: scalex(1) translateY(0px); opacity: 1; }
		input{ opacity: 1; }
		&:before { transform: translateX(0); }
		&:after { transform: translateX(0); }
		
		.sticks
		{
			transition-duration: calc(var(--speed) * 1s);
			transform: translateX(calc(var(--height) * -0.1px)) translateY(0) rotate(180deg);
			&:before { transform: rotate(-45deg); }
			&:after { transform: rotate(45deg); }
		}
	}
	
	
}

document.querySelector('.sticks').addEventListener('click',(e) =>
{
	e.stopPropagation();
	e.preventDefault();
  	//document.querySelector('.input').value = '';
	document.querySelector('.input-container').blur();
});