.hamburger-menu,
.hamburger-menu:after,
.hamburger-menu:before {
  width: calc(var(--burger-width));
  height: calc(var(--burger-width) / 10);
}

.hamburger-menu {
  position: relative;
  background: var(--burger-color);
  transition: all 300ms;
}

.hamburger-menu.animate {
  background: rgba(255, 255, 255, 0);
}

.hamburger-menu:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(var(--burger-width) / 4);
  background: var(--burger-color);
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), background-color 300ms;
}

.hamburger-menu:after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--burger-width) / 4);
  background: var(--burger-color);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), background-color 300ms;
}

.no-top .hamburger-menu, .no-top .hamburger-menu:before, .no-top .hamburger-menu:after {
  background-color: var(--burger-notop-color);
}

.hamburger-menu.animate:after {
  top: 0;
  transform: rotate(45deg);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-menu.animate:before {
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}