$color: #007ee5;

html, body {
  width: 100%;
  height: 100%;
  position: relative;
  zoom: 2;
  color: $color;
}

.search-icon {
  padding: 10px;
  transition: all .3s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  
  &:before, &:after {
    content: '';
    display: inline-block;
    border: 2px solid;
    
    transition: all .3s cubic-bezier(0.555, -0.310, 0.265, 1.550);
  }
  
  &:before {
    height: 5px;
    transform: rotate(-45deg);
    background-color: $color;
  }
  
  &:after {
    transform: translate3d(-20px,-5px,0) rotate(-45deg);
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border-width: 4px;
  }
  
  body:hover & {
    margin-left: -12px;
    &:before {
      height: 20px;
    }
    
    &:after {
      border-radius: 0;
      border-width: 2px;
      width: 0;
      height: 20px;
      background-color: $color;
      transform: rotate(45deg) translate3d(-2.5px, 2.5px, 0);
    }
  }
}