.vt-hamburger {
  display: flex;
  justify-content: center;
  align-items: center;
}

.vt-hamburger:hover .vt-hamburger-top    { top: 0; left: 0; transform: translateX(4px); }
.vt-hamburger:hover .vt-hamburger-middle { top: 6; left: 0; transform: translateX(0); }
.vt-hamburger:hover .vt-hamburger-bottom { top: 12px; left: 0; transform: translateX(8px); }

.vt-hamburger.is-active .vt-hamburger-top    { top: 6px; transform: translateX(0) rotate(225deg); }
.vt-hamburger.is-active .vt-hamburger-middle { top: 6px; transform: translateX(16px); }
.vt-hamburger.is-active .vt-hamburger-bottom { top: 6px; transform: translateX(0) rotate(135deg); }

.vt-hamburger.is-active:hover .vt-hamburger-top,
.vt-hamburger.is-active:hover .vt-hamburger-middle,
.vt-hamburger.is-active:hover .vt-hamburger-bottom {
  background-color: var(--vt-c-text-2);
  transition: top .25s, background-color .25s, transform .25s;
}

.vt-hamburger-container {
  position: relative;
  width: 16px;
  height: 14px;
  overflow: hidden;
}

.vt-hamburger-top,
.vt-hamburger-middle,
.vt-hamburger-bottom {
  position: absolute;
  width: 16px;
  height: 2px;
  background-color: var(--vt-c-text-1);
  transition: top .25s, background-color .5s, transform .25s;
}

.vt-hamburger-top    { top: 0; left: 0; transform: translateX(0); }
.vt-hamburger-middle { top: 6px; left: 0; transform: translateX(8px); }
.vt-hamburger-bottom { top: 12px; left: 0; transform: translateX(4px); }