:root {
  --one-color: #473E75;
  --two-color: #fff;
  --transition-base: 0.25s ease-in-out;
}

.menu-toggle {
  display: inline-block;
  font: inherit;
  background-color: var(--one-color, #000);
  color: var(--two-color, #fff);
  border: solid 3px transparent;
  padding: 3em;
  cursor: pointer;
  transition: all var(--transition-base);
}

.menu-toggle:hover {
  background-color: transparent;
  color: var(--one-color);
  border-color: currentColor;
}

.menu-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.5), 0 0 0 1.5px rgba(255, 105, 180, 0.5);
}

.menu-toggle::-moz-focus-inner {
  border: none;
}

.js-focus-visible .menu-toggle:focus:not(.focus-visible) {
  box-shadow: none;
}

.menu-toggle:active {
  filter: saturate(200%);
}

[aria-expanded] path {
  transition: d var(--transition-base, .25s ease-in-out);
}

[aria-expanded="true"] path {
  d: path("M1,1 9,9 M5,5 5,5 M1,9 9,1");
}

.cross {
  display: none;
}

[aria-expanded="true"] .cross {
  display: block;
}

[aria-expanded="true"] .burger {
  display: none;
}

@supports (d: path("")) {
  [aria-expanded="true"] .cross {
    display: none;
  }

  [aria-expanded="true"] .burger {
    display: block;
  }

  [aria-expanded] path {
    transition: d var(--transition-base, .25s ease-in-out);
  }

  [aria-expanded="true"] path {
    d: path("M1,1 9,9 M5,5 5,5 M1,9 9,1");
  }
}