.hm-hamburger--x.is-active .hm-hamburger__line--top,
.hm-hamburger--spin.is-active .hm-hamburger__line--top,
.hm-hamburger--squeeze.is-active .hm-hamburger__line--top {
  transform: translateY(var(--hm-hamburger-line-step)) rotate(45deg);
}

.hm-hamburger--x.is-active .hm-hamburger__line--middle,
.hm-hamburger--spin.is-active .hm-hamburger__line--middle,
.hm-hamburger--squeeze.is-active .hm-hamburger__line--middle {
  opacity: 0;
  transform: scaleX(0.1);
}

.hm-hamburger--x.is-active .hm-hamburger__line--bottom,
.hm-hamburger--spin.is-active .hm-hamburger__line--bottom,
.hm-hamburger--squeeze.is-active .hm-hamburger__line--bottom {
  transform: translateY(calc(0px - var(--hm-hamburger-line-step))) rotate(-45deg);
}

.hm-hamburger--spin.is-active .hm-hamburger__box {
  transform: rotate(180deg);
}

.hm-hamburger--squeeze .hm-hamburger__line {
  transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}

.hm-hamburger--arrow.is-active .hm-hamburger__line--top {
  transform: translate(-2px, 2px) rotate(-42deg) scaleX(0.55);
  transform-origin: left center;
}

.hm-hamburger--arrow.is-active .hm-hamburger__line--middle {
  transform: translateX(-2px);
}

.hm-hamburger--arrow.is-active .hm-hamburger__line--bottom {
  transform: translate(-2px, -2px) rotate(42deg) scaleX(0.55);
  transform-origin: left center;
}