.primary-nav__toggle {
  --number-w: 16;
  --number-h: 22;
  --dimension-w: 16px;
  --dimension-h: 22px;
  --bar-weight: calc(var(--dimension-h) / 8);
  --bar-color: var(--color-mono-bold);

  width: var(--dimension-w);
  height: var(--dimension-h);
  position: relative;
  display: block;
  text-indent: -9999rem;
}

.primary-nav__toggle:before,
.primary-nav__toggle:after {
  content: '';
  position: absolute;
  height: var(--bar-weight);
  left: 0;
  width: var(--dimension-w);
  background: var(--bar-color);
  border-radius: var(--bar-weight);
  transition:
    transform var(--transition-speed),
    box-shadow var(--transition-speed),
    width var(--transition-speed),
    left var(--transition-speed);
  transition-timing-function: ease-out;
}

.primary-nav__toggle:before {
  --y-offset: calc((var(--dimension-h) / 2) - (var(--bar-weight) / 2));

  top: 0;
  box-shadow: 0 var(--y-offset) 0 var(--bar-color);
  transform-origin: top left;
}

.primary-nav__toggle:after {
  bottom: 0;
  transform-origin: bottom left;
}

.primary-nav--active {
  .primary-nav__toggle {
    --a-sqr: calc(var(--number-w) * var(--number-w));
    --b-sqr: calc(var(--number-h) * var(--number-h));
    --a-sqr-plus-b-sqr: calc(var(--a-sqr) + var(--b-sqr));
    --base-width: calc(1px * sqrt(var(--a-sqr-plus-b-sqr)));
    --width: calc(var(--base-width) - (var(--bar-weight) / 2));
    --angle: calc(90deg - atan(var(--number-w) / var(--number-h)));
  }

  .primary-nav__toggle:before,
  .primary-nav__toggle:after {
    width: var(--width);
  }

  .primary-nav__toggle:before {
    transform: rotate(var(--angle));
    box-shadow: none;
  }

  .primary-nav__toggle:after {
    transform: rotate(calc(-1 * var(--angle)));
  }
}