/*
Inspired by https://dribbble.com/shots/1625088-Open-Close-Smash?list=searches&tag=animation&offset=183

P.S. Desktop Chrome Only
*/

body{
  background-color: #F2276C;
}

.icon{
  margin: 0 auto;
  margin-top: 100px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  position: relative;
  user-select: none;
  
  .first, .last{
    width: 50px;
    animation: scales 0.6s;
    
    
    .left{
      width: 50%;
      height: 6px;
      background: white;
      display: inline-block;
      margin-right: -4px;
      border-radius: 5px 0 0 5px;
      position: relative;
      transition: all 0.2s;
    }
    .right{
      width: 50%;
      height: 6px;
      background: white;
      display: inline-block;
      margin-right: -4px;
      border-radius: 0 5px 5px 0;
      position: relative;
      transition: all 0.2s;
    }
  }
  .second{
    width: 50px;
    height: 0px;
    display: inline-block;
    border: 3px solid white;
    box-sizing: border-box;
    border-radius: 5px;
    animation: scales 0.5s;
  }
}

.icon.active{
  padding-top: 5px;
  box-sizing: border-box;
  
  .first{
    animation: scales 0.5s;
    .left{
      transform: rotate(45deg) scale(1.2);
      left: 4px;
      top: 1px;
      border-radius: 5px;
      
    }
    .right{
      transform: rotate(-45deg) scale(1.2);
      right: 4px;
      top: 2px;
      border-radius: 5px;
    }
  }
  
  .second{
    border: 5px solid white;
    width: auto;
    height: auto;
    position: absolute;
    top:-14px;
    bottom: -16px;
    left: -15px;
    right: -15px;
    border-radius: 50%;
    animation: circle 0.5s;
  }
  
  .last{
    animation: scales 0.5s;
    .left{
      transform: rotate(-45deg) scale(1.2);
      left: 4px;
      top: 2px;
      border-radius: 5px;
    }
    .right{
      transform: rotate(45deg) scale(1.2);
      right: 4px;
      top: 1px;
      border-radius: 5px;
    }
  }
}

@keyframes circle {
  0%{
    opacity: 0;
    transform: scale(0);
  }
  60%{
    opacity: 1;
    transform: scale(1.1);
  }
  70%{
    transform: scale(1);
  }
  
  100%{
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes scales {
  0%{
    transform: scale(0.3)
  }
  30%{
    transform: scale(1.2)
  }
  60%{
    transform: scale(0.9)
  }
  100%{
    transform: scale(1)
  }
}