.hamburger {
  cursor: pointer;
  height: 50px;
  position: relative;
  width: 50px;
  --barHeight: 3px;
  --barSpacing: 3px;
  --barWidth: 45%;
}

.hamburger__btn,
.hamburger__btn:before,
.hamburger__btn:after {
  background: rgb(var(--hamburger-color));
  border-radius: 4px;
  content: "";
  width: 100%;
  height: var(--barHeight);
  position: absolute;
  display: block;
  left: 0;
  transition: 250ms transform ease, 250ms top ease, 250ms bottom ease, 250ms background;
}

.hamburger__btn {
  top: calc(50% - var(--barHeight) / 2);
  left: calc(50% - var(--barWidth) / 2);
  width: var(--barWidth);
}

.hamburger__btn:before {
  bottom: calc(100% + var(--barSpacing));
}

.hamburger__btn:after {
  top: calc(100% + var(--barSpacing));
}

.header-drawer--open .hamburger__btn {
  background: transparent;
}
.header-drawer--open .hamburger__btn:before {
  bottom: 0;
  transform: rotate(45deg);
}
.header-drawer--open .hamburger__btn:after {
  top: 0;
  transform: rotate(-45deg);
}