.pp-buttons-menu {
  transition: var(--v-transition__default);
  cursor: pointer;
}

.pp-buttons-menu__text {
  display: none;
}

.pp-buttons-menu__icon {
  --icon__size: 2.3rem;
  --icon__line-height: 2px;
  --icon__line-spacing: 10px;
  --icon__color: var(--v-color__1);

  width: var(--icon__size);
  height: var(--icon__size);
  position: relative;
  transition: var(--v-transition__default);
}

body.is-menu-open .pp-buttons-menu__icon,
body.is-scrolled .pp-buttons-menu__icon {
  --icon__color: var(--v-color__1);
}

.pp-buttons-menu__icon span {
  display: block;
  position: absolute;
  height: var(--icon__line-height);
  background: var(--icon__color);
  border-radius: 3px;
  opacity: 1;
  left: 0;
  width: 100%;
  transform: rotate(0deg);
  transition: var(--v-transition__default);
}

.pp-buttons-menu__icon > :nth-child(1) {
  top: calc(50% - (var(--icon__line-height) / 2) - var(--icon__line-spacing));
}

body.is-menu-open .pp-buttons-menu__icon > :nth-child(1) {
  transform: rotate(45deg);
}

.pp-buttons-menu__icon > :nth-child(2) {
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

body.is-menu-open .pp-buttons-menu__icon > :nth-child(2) {
  width: 0;
  opacity: 0;
}

.pp-buttons-menu__icon > :nth-child(3) {
  top: calc(50% - (var(--icon__line-height) / 2) + var(--icon__line-spacing));
}

body.is-menu-open .pp-buttons-menu__icon > :nth-child(3) {
  transform: rotate(-45deg);
}

.pp-buttons-menu__icon > :nth-child(2),
body.is-menu-open .pp-buttons-menu__icon > :nth-child(1),
body.is-menu-open .pp-buttons-menu__icon > :nth-child(3) {
  top: calc(50% - (var(--icon__line-height) / 2));
}

@media (min-width: 1200px) {
  .pp-buttons-menu__icon {
    --icon__size: 2.2rem;
    --icon__line-spacing: 11px;
  }
}