Hamburger icon with animation

hamburger.html

<div class="c-drawer" ng-click="vm.toggleDrawer()" ng-class="{'c-drawer--opened':vm.drawerOpened}" >
  <hr class="c-drawer__line c-drawer__line--1"/>
  <hr class="c-drawer__line c-drawer__line--2"/>
  <hr class="c-drawer__line c-drawer__line--3"/>
</div>

hamburger.scss

$line-color: #4d4d4d;
$line-hover-offset: 3px;
$line-rotation-deg: 45deg;
$line-offset: 16px;
 
@include component(drawer) {
  display: block;
  width: 37px;
  height: 40px;
  cursor: pointer;
  z-index: 999999;

@include element(line) {
    top: 0;
    opacity: 1;
    position: relative;
    border: 0;
    height: 7px;
    display: block;
    margin-bottom: 9px;
    background-color: $line-color;
    transition: all linear 200ms;
 }
  
 &:hover:not(.c-drawer--opened) {
   @include element-of(c-drawer, line) {
     @include mod(1) {
       top: -$line-hover-offset;
     }
     @include mod(3) {
       top: $line-hover-offset;
     }
   }
 }

 &:hover {
   @include element-of(c-drawer, line) {
     background-color: lighten($line-color, 7);
   }
 }

 @include mod(opened) {
   @include element-of(c-drawer, line) {
     @include mod(1) {
       transform: rotate($line-rotation-deg);
       top: $line-offset;
     }
     @include mod(2) {
       opacity: 0;
     }
     @include mod(3) {
       transform: rotate(-$line-rotation-deg);
       top: -$line-offset;
     }
   }
 }
}