.hamburger {
  display: inline-block;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  width: 40px;
  height: 4px;
  background-color: white;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: background-color 0.2s ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background-color: white;
  border-radius: 4px;
  position: absolute;
  left: 0;
  transition: top 0.2s ease, bottom 0.2s ease, transform 0.2s ease;
}

.hamburger-inner::before {
  top: -10px;
}

.hamburger-inner::after {
  bottom: -10px;
}

.hamburger--squeeze.is-active .hamburger-inner {
  background-color: transparent;
}

.hamburger--squeeze.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(45deg);
  transition: top 0.2s ease, transform 0.2s ease 0.2s;
}

.hamburger--squeeze.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 0.2s ease, transform 0.2s ease 0.2s;
}

.hamburger--squeeze:not(.is-active) .hamburger-inner {
  background-color: white;
  transition: background-color 0.2s ease;
}

.hamburger--squeeze:not(.is-active) .hamburger-inner::before {
  top: 0;
  transform: rotate(0);
  transition: transform 0.2s ease, top 0.2s ease 0.2s;
}

.hamburger--squeeze:not(.is-active) .hamburger-inner::after {
  bottom: 0;
  transform: rotate(0);
  transition: transform 0.2s ease, bottom 0.2s ease 0.2s;
}

.hamburger--squeeze:not(.is-active) .hamburger-inner::before {
  top: -10px;
}

.hamburger--squeeze:not(.is-active) .hamburger-inner::after {
  bottom: -10px;
}