frontend/scss/atoms/_ham.scss
/***

Hamburger button
================

Hamburger button showing in the header on smaller devices

```
<div class="styleguide--demo">
    <div class="ham"><span class="ham__label">Home</span> <button type="button" class="btn ham__btn" data-ham-btn><span class="ham__icon"><span class="ham__line"></span></span></button>
    </div>
</div>
```

***/

$height__nav: 60px;

.ham {
  @include btn-reset;
  cursor:pointer;
  position:absolute;
  top:0;
  right:0;
  height:$height__nav;
  z-index:1;

  @include breakpoint('large+') {
    display:none;
  }

  @each $name, $point in $breakpoints {
    @include breakpoint('#{$name}') {
      margin-right: map-get($outer-gutters, $name);
      margin-left: map-get($outer-gutters, $name);
    }
  }
}

.ham--search {
  @each $name, $point in $breakpoints {
    @include breakpoint('#{$name}') {
      margin-right: map-get($outer-gutters, $name) + 30px;
      margin-left: map-get($outer-gutters, $name);
    }
  }
}

.ham__label,
.ham__btn {
  //height:20px;
  //padding: 19px 0 20px 20px;
  display: inline-block;
}

.ham__label {
  color:$color__background;
  /*@include font-smoothing;*/

  @include breakpoint('xsmall') {
    display:none;
  }
}

.ham__btn {
  overflow: hidden;
  box-sizing: content-box;
  font-size:0px;
}

.ham__label,
.ham__line {
  opacity:1;
  // transition: opacity .3s ease;
}

.ham__label {
  margin-right: 20px;
}

.ham__icon {
  width:20px;
  height:13px;
  display: block;
  position: relative;

  &:after,
  &:before {
    content:'';
    height:1px;
    position:absolute;
    display:block;
    left:0;
    right:0;
    width:100%;
    background:$color__text--light;
    // transition: transform .3s ease;
  }

  &:before {
    top:0;
  }

  &:after {
    bottom:0;
  }
}

.ham .icon {
  display:none;
  color:$color__text--light;
}

.ham:hover,
.ham:focus {
  .icon {
    color:$color__background;
  }
}

.ham__line {
  height:1px;
  background:$color__text--light;
  width:100%;
  left:0;
  right:0;
  position:absolute;
  top:6px;
}

.ham:hover,
.ham:focus {
  .ham__icon {
    &:after,
    &:before {
      background:$color__background;
    }
  }

  .ham__line {
    background:$color__background;
  }
}
