#primary-navigation {
  display: none;
  visibility: hidden;
  position: absolute;
  z-index: 99;
  right: -1rem;
  top: -1rem;
  height: 100vh;
  padding: 4rem 2rem 1rem 2rem;
  background-color: lightgrey;
  overflow: scroll;
}

#primary-navigation[data-state="open"] {
  display: block;
  visibility: visible;
  animation: navDropdownOpen var(--_nav-time) forwards;
}

@keyframes navDropdownOpen {
  from {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

#primary-navigation[data-state="closing"] {
  display: block;
  visibility: visible;
  animation: navDropdownClose var(--_nav-time) forwards;
}

@keyframes navDropdownClose {
  from {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  to {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}

.menu-overlay {
  background-color: rgb(0 0 0 / 0.25);
}

.menu-overlay[data-state="open"] {
  display: block;
  animation: navOverlayOpen var(--_nav-time) forwards;
}

@keyframes navOverlayOpen {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.menu-overlay[data-state="closing"] {
  display: block;
  animation: navOverlayClose var(--_nav-time) forwards;
}

@keyframes navOverlayClose {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}