:root {
  --hamburger-layer-width: 16px;
  --hamburger-layer-height: 2px;
  --hamburger-layer-spacing: 5px;
  --hamburger-layer-color: black;
  --hamburger-layer-border-radius: 2px;
  --hamburger-hover-opacity: 1;
  --hamburger-padding-x: 0px;
  --hamburger-padding-y: 0px;
  --hamburger-active-layer-color: var(--hamburger-layer-color);
  --hamburger-active-hover-opacity: var(--hamburger-hover-opacity);
  --hamburger-translate-x: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
  --hamburger-top: ((var(--hamburger-layer-spacing) * 2) + (var(--hamburger-layer-height) * 2)) * -1;
}

.hamburger {
  padding: var(--hamburger-padding-y) var(--hamburger-padding-x);
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}

.hamburger:hover {
  opacity: 0.8;
}

.hamburger.is-active:hover {
  opacity: 0.8;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: var(--hamburger-layer-color);
}

.hamburger-box {
  width: var(--hamburger-layer-width);
  height: calc((var(--hamburger-layer-height) * 3) + (var(--hamburger-layer-spacing) * 2));
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: calc(var(--hamburger-layer-height) / -2);
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: var(--hamburger-layer-width);
  height: var(--hamburger-layer-height);
  background-color: var(--hamburger-layer-color);
  border-radius: var(--hamburger-layer-border-radius);
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: calc((var(--hamburger-layer-spacing) + var(--hamburger-layer-height)) * -1);
}

.hamburger-inner::after {
  bottom: calc((var(--hamburger-layer-spacing) + var(--hamburger-layer-height)) * -1);
}

/* Collapse */

.hamburger--collapse .hamburger-inner {
  top: calc(var(--hamburger-layer-height) + var(--hamburger-layer-spacing));
  bottom: 0;
    transition-duration: 0.13s;
    transition-delay: 0.13s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse .hamburger-inner::after {
    top: var(--hamburger-top);
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
                opacity 0.1s linear;
}

.hamburger--collapse .hamburger-inner::before {
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
                transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse.is-active {
    transform: rotate(-45deg);
    transition: transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--collapse.is-active .hamburger-inner {
    transform: translate3d(0, var(--hamburger-translate-x), 0) rotate(-45deg);
    transition-delay: 0.22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--collapse.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
                opacity 0.1s 0.22s linear;
}

.hamburger--collapse.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
                transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}