.navButton {
  appearance: none;
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
  color: currentColor;
  background-color: currentColor;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
  text-indent: 100%;
  white-space: nowrap;
  margin-left: auto !important;
}

.navButton.isOpen {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>');
}

@media screen and (min-width: 921px) {
  .navButton {
    display: none;
  }
}

@media screen and (max-width: 920px) {
  .navButton + .navContainer {
    position: absolute;
    overflow: hidden;
    height: 0;
    inset: 100% 0 0 0;
    box-sizing: border-box;
    padding-inline: var(--wp--custom--spacing--outer);
    transition: 0.25s;
  }

  .navButton.isOpen + .navContainer {
    padding-block: 1.6em;
    overflow: auto;
    height: calc(100dvh - (4em + 1px));
    margin-top: 1px;
  }

  .navContainer ul {
    flex-direction: column;
  }

  .theme-dark .navContainer {
    background-color: var(--wp--preset--color--dark);
  }

  .theme-light .navContainer {
    background-color: var(--wp--preset--color--light);
  }
}