// vars
$bg-c: #587992;
$bar-c: #cfe4f5;
$hamburger-width: 6em;

// mixins
@mixin center{
  position: absolute;
  margin: auto;
  top: 0; right: 0; bottom: 0; left: 0;
}

// keyframes
@include keyframes(blob){
  0%{
    @include transform(scale(0));
  }
  99%{
    @include transform(scale(1));
  }
  100%{
    @include transform(scale(0));
  }
}

// main
.wrapper{
  display: inline-block;
  width: $hamburger-width;
  height: $hamburger-width;
  @include center;
}

.hamburger{
  display: block;
  width: $hamburger-width;
  height: $hamburger-width;
  position: relative;
  @include border-radius(50%);
  overflow: hidden;
  cursor: pointer;
  @include transition(background-color .1s ease-out, transform .2s ease-out);
  outline: none;
  
  &:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.1);
    @include border-radius(50%);
    @include transition(transform .2s ease-out);
    @include transform(scale(0));
  }
  
  &:hover{
    background-color: rgba(255,255,255,.1);
  }
  
  i{
    display: inline-block;
    width: 50%;
    height: 6%;
    background-color: $bar-c;
    @include center;
    
    &:before,
    &:after{
      content: "";
      display: inline-block;
      width: 100%;
      height: 100%;
      background-color: $bar-c;
      position: absolute;
      @include transition(transform .1s ease-out);
    }
    
    &:before{
      top: -200%;
    }
    
    &:after{
      bottom: -200%;
    }
    
  }
  
}

// create arrow
.spin180{
  
  .hamburger{
    
    &:before{
      @include animation(blob .2s normal forwards);
    }
    
    i{
      
      &:before,
      &:after{
        width: 50%;
        top: initial; right: 0; bottom: initial;
      }
      
      &:before{
        @include transform-origin(100%, 50%);
        @include transform(rotate(45deg) translateX(6%));
        top: 0;
      }
      
      &:after{
        @include transform-origin(100%, 50%);
        @include transform(rotate(-45deg) translateX(6%));
      }
      
    }
    
  }
  
}


// housekeeping
html{
  height: 100%;
}

body{
  height: 100%;
  background-color: $bg-c;
  margin: 0;
  padding: 0;
  font-size: 10px;
  @include transition(background-color .1s ease-out);
  
  &.spin180{
    background-color: shade($bg-c, 50%);
  }
  
}