.button--hamburger {
  display: block;
  height: $icon-size;
  position: relative;
  width: $icon-size;
  z-index: 6;
}

.icon--hamburger {
  height: auto;
  left: 1px;
  transition: background-color 0.4s;
  top: $baseline * 0.9;

  &,
  &::before,
  &::after {
    background: $color-brand--four;
    border-radius: $border-radius;
    height: 2px;
    position: absolute;
    width: 18px;
  }

  &::before,
  &::after {
    content: '';
    left: 0;
    transition: top $transition-duration 0.4s, background-color 0s 0.3s, transform $transition-duration; //OUT animation
    transform-origin: center; // center
  }

  &::after {
    top: $baseline * 0.6;
  }

  &::before {
    top: -$baseline * 0.6;
  }
}

// hamburger : navigation modal open
.modal-nav-open {
  .button--hamburger {
    position: relative;
    z-index: 6;
  }

  .icon--hamburger {
    // middle bar
    background: transparent;
    transition: background-color 0.05s 0.15s;

    &::before,
    &::after {
      background: $color-brand--one;
      transition: top $transition-duration, background-color $transition-duration 0.15s,
        transform $transition-duration $transition-duration;
      top: 0;
    }

    &::before {
      // top bar
      transform: rotate(-45deg);
    }

    &::after {
      // bottom bar
      transform: rotate(45deg);
    }
  }
}