.brxe-hamburger-menu {
  --brxe-hm-bar-color: white;
  --brxe-hm-bar-height: 2px;
  --brxe-hm-bar-radius: 1px;
  --brxe-hm-wrap-width: 30px;
  --brxe-hm-wrap-height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.brxe-hamburger-menu .hamburger-wrap {
  position: relative;
  width: var(--brxe-hm-wrap-width);
  height: var(--brxe-hm-wrap-height);
}

.brxe-hamburger-menu .bar {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--brxe-hm-bar-height);
  background: var(--brxe-hm-bar-color);
  border-radius: var(--brxe-hm-bar-radius);
  transition:
    transform 0.35s cubic-bezier(.4, 0, .2, 1),
    opacity 0.25s ease,
    top 0.35s cubic-bezier(.4, 0, .2, 1);
}

.brxe-hamburger-menu .bar-top { top: 23%; }
.brxe-hamburger-menu .bar-mid { top: 50%; transform: translateY(-50%); }
.brxe-hamburger-menu .bar-bot { bottom: 23%; top: auto; }

/* Active state — bricksToggle adds .is-active to the button */
.brxe-hamburger-menu.is-active .bar-top {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.brxe-hamburger-menu.is-active .bar-mid {
  opacity: 0;
  transform: translateY(-50%) scaleX(0);
}
.brxe-hamburger-menu.is-active .bar-bot {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}