[data-component-id="pedestal:menu_icon"] { 
  --color: var(--color-on-surface, black);
  --color-open: var(--color-on-primary, white);
}

.menu-icon {
  display: flex;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  z-index: 200;
}

.menu-icon__line {
  fill: none;
  stroke: var(--color);
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-icon[data-menu-open] .menu-icon__line {
  stroke: var(--color-open);
}

.menu-icon__line1 {
  stroke-dasharray: 60 207;
}
.menu-icon__line2 {
  stroke-dasharray: 60 60;
}
.menu-icon__line3 {
  stroke-dasharray: 60 207;
}
.menu-icon[data-menu-open] .menu-icon__line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
}
.menu-icon[data-menu-open] .menu-icon__line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
}
.menu-icon[data-menu-open] .menu-icon__line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
}