.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;

    @include bg-variants() {
      background: variant-property('iconInformativePrimary');
    }

    .bg-brand--off-white &,
    .bg-brand--white &,
    .bg-brand--turquoise &,
    .bg-brand--yellow & {
      background: $color-brand--two;
    }

    .bg-brand--red & {
      background: $color--two-180;
    }
  }

  &::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);
    }
  }
}