.hamburger,
.hamburger:after,
.hamburger:before {
  background: black;
}

.open .hamburger {
  background-color: transparent;
}

.hamburger {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--line-width, 2.4rem);
  height: var(--line-height, 2px);
  margin-top: calc(var(--line-height, 2px) / -2);
  margin-left: calc(var(--line-width, 2.4rem) / -2);
  border-radius: var(--border-radius, 2px);
  transition: background-color .3s
}

.hamburger:after,
.hamburger:before {
  content: "";
  display: inline-block;
  position: absolute;
  right: 0;
  height: 100%;
  width: 100%;
  transform-origin: 50% 50%;
  transition: top .3s ease .2s,transform .3s ease,background-color .3s ease,width .3s ease .2s;
  border-radius: inherit;
}

.hamburger:before {
  top: calc(var(--line-gap, 1.4rem) / -2);
}

.hamburger:after {
  top: calc(var(--line-gap, 1.4rem) / 2);
}

.open .hamburger:after,
.open .hamburger:before {
  top: 0;
  transition: top .3s ease,transform .3s ease .2s,width .3s ease
}

.open .hamburger:before {
  transform: rotate3d(0,0,1,45deg)
}

.open .hamburger:after {
  transform: rotate3d(0,0,1,-45deg)
}