form.search-box
  input(type="text", placeholder=" ")
  button(type="reset")

$font-size: 20px;
$frame-color: #000000;
$size: 2.5em;
$open-width: 18em;
$open-padding: 0.3em 2.1em 0.3em 0.4em;
$frame-thickness: 0.3em;
$handle-height: 1.4em;
$open-trans-time: 800ms;
$close-trans-time: 150ms;

@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

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

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
}

////////////////////////////////////////////////////////////////////////////////
//                                 SEARCH BOX                                 //
////////////////////////////////////////////////////////////////////////////////

.search-box {
  font-size: $font-size;
  border: solid $frame-thickness $frame-color;
  display: inline-block;
  position: relative;
  border-radius: $size;
  input[type="text"] {
    font-family: inherit;
    font-weight: bold;
    width: $size;
    height: $size;
    padding: $open-padding;
    border: none;
    box-sizing: border-box;
    border-radius: $size;
    transition:
      width $open-trans-time cubic-bezier(0.68, -0.55, 0.27, 1.55) $close-trans-time;
    &:focus {
      outline: none;
    }
    &:focus, &:not(:placeholder-shown) {
      width: $open-width;
      transition: width $open-trans-time cubic-bezier(0.68, -0.55, 0.27, 1.55);
      + button[type="reset"] {
        transform: rotate(-45deg) translateY(0);
        transition:
          transform $close-trans-time ease-out $open-trans-time;
      }
      + button[type="reset"]:after {
        opacity: 1;
        transition:
          top $close-trans-time ease-out ($open-trans-time + $close-trans-time),
          right $close-trans-time ease-out ($open-trans-time + $close-trans-time),
          opacity $close-trans-time ease ($open-trans-time + $close-trans-time);
      }
    }
  }
  button[type="reset"] {
    background-color: transparent;
    width: $handle-height;
    height: $handle-height;
    border: 0;
    padding: 0;
    outline: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: ($size / 2) - ($handle-height / 2);
    right: ($size / 2) - ($handle-height / 2);
    transform: rotate(-45deg) translateY($size - $frame-thickness);
    transition:
      transform $close-trans-time ease-out $close-trans-time;
    &:before, &:after {
      content: "";
      background-color: $frame-color;
      width: $frame-thickness;
      height: $handle-height;
      position: absolute;
    }
    &:after {
      transform: rotate(90deg);
      opacity: 0;
      transition:
        transform $close-trans-time ease-out,
        opacity $close-trans-time ease-out;
    }
  }
}

// Search for it but no Javascript code 🔍🔍🔍🔍🔍