/* stylelint-disable selector-class-pattern */

.p-button-menu {
  transition: var(--v-transition-default);
  cursor: pointer;
}

.p-button-menu__text {
  display: none;
}

.p-button-menu__icon {
  --size: 2.2rem;
  --line-height: 3px;
  --line-spacing: 11px;
  --color: var(--v-color-1);

  width: var(--size);
  height: var(--size);
  position: relative;
  transition: var(--v-transition-default);
}

.p-button-menu__icon span {
  display: block;
  position: absolute;
  height: var(--line-height);
  background: var(--color);
  border-radius: 3px;
  opacity: 1;
  left: 0;
  width: 100%;
  transform: rotate(0deg);
  transition: var(--v-transition-default);
}

.p-button-menu__icon > :nth-child(1) {
  top: calc(50% - (var(--line-height) / 2) - var(--line-spacing));
}

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

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

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

.p-button-menu__icon > :nth-child(3) {
  top: calc(50% - (var(--line-height) / 2) + var(--line-spacing));
}

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

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