.wave-menu-toggle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.wave-menu-toggle:focus {
  outline: none;
  box-shadow: none;
}

.wave-menu-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  box-shadow: none;
}

.wave-menu-toggle__viewport {
  display: block;
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  flex: 0 0 2.5rem;
}

.wave-menu-toggle__strip {
  display: block;
  width: 7.5rem;
  height: 2.5rem;
  background-image: url('../cus-img/nav/wave-menu-toggle6.png');
  background-repeat: no-repeat;
  background-size: 7.5rem 2.5rem;
  background-position: left top;
  transform: translateX(-5rem);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover frame only on devices that really have hover. */
@media (hover: hover) and (pointer: fine) {
  .wave-menu-toggle[aria-expanded='false']:hover .wave-menu-toggle__strip {
    transform: translateX(-2.5rem);
  }
}

/* Open state always wins. */
.wave-menu-toggle[aria-expanded='true'] .wave-menu-toggle__strip {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .wave-menu-toggle__strip {
    transition: none;
  }
}