<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();
});