.hamburger {
  // Settings
  $icon-width:      26;
  $icon-height:     19; // Default 19
  $line-height:     3;  // Default 3
  $line-color:      $c-brand;
  $line-corners:    1; // Round corners. Default 0
  $transition-time: .5s;

  // Styles
  background: transparent;
  display: block;
  height: rem-calc( $icon-height );
  position: relative;
  width: rem-calc( $icon-width );

  &::before,
  &::after {
    backface-visibility: hidden;
    background: $line-color;
    @if $line-corners != 0 {
      border-radius: rem-calc( $line-height / 2 );
    }
    content: '';
    height: rem-calc( $line-height );
    left: 0;
    transition-duration: $transition-time;
    width: rem-calc( $icon-width );
  }

  &::before {
    box-shadow: $line-color 0 rem-calc( ( $icon-height - $line-height ) / 2 ) 0 0;
    position: absolute;
    top: 0;
  }

  &::after {
    position: absolute;
    top: calc( 100% - #{ rem-calc( $line-height ) } );
  }

  &.hamburger--open {

    &::before {
      box-shadow: transparent 0 0 0 0;
      top: 50%;
      transform: rotate( 225deg );
    }

    &::after {
      top: 50%;
      transform: rotate( 315deg );
    }
  }
}