.l-menu {
  --gap: var(--theme-spacing--gutter);
  @include grid-assign(heading, action, primary, secondary, container);
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;
  right: 100%;
  visibility: hidden;
  height: 100dvh;
  z-index: 40;
  background-image: linear-gradient(
    -45deg,
    var(--theme-color--block),
    var(--theme-color--paper)
  );
  box-shadow: var(--theme-box-shadow);

  &.is-active {
    visibility: visible;
    right: 0;
    outline: none;
    animation: slide-menu 0.5s ease-out forwards;
  }

  grid-template:
    ". container . " calc(100vh - calc(100vh - 100%)) / minmax(
      var(--theme-spacing--gutter),
      1fr
    )
    auto
    minmax(var(--theme-spacing--gutter), 1fr);

  &__container {
    display: grid;
    grid-template:
      ". .......   ......... ." var(--theme-spacing--1)
      ". heading   action    ." min-content
      ". .......   ......... ." var(--gap)
      ". primary   primary   ." 1fr
      ". secondary secondary ." min-content
      ". .......   ......... ." var(--gap) /
      var(--gap) 1fr
      var(--theme-spacing--touchtarget) var(--gap);
    align-items: center;
  }

  &__action {
    border-radius: 0;
    --button-padding: 0;
    margin: 0 0 auto auto;
    width: fit-content;
    min-width: fit-content;
  }

  &__item {
    @extend %list-without-list-formatting;
  }

  &__link {
    @include on-event {
      text-decoration: underline dotted var(--theme-color--accent);
    }
  }

  &__heading {
    line-height: 0.75;
    text-shadow: -2px 1px 0 var(--theme-color--pop);
  }
  &__home {
    @include on-event {
      outline: 1px dotted;
      color: var(--theme-color--accent);
    }
  }

  &__primary {
    @extend %list-without-list-formatting;
    display: grid;
    align-self: stretch;
    place-content: center;
  }

  &__secondary {
    @extend %list-without-list-formatting;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: var(--theme-spacing--gutter);
  }
}

@keyframes slide-menu {
  0% {
    transform: translateX(100vw);
  }
  40% {
    transform: translateX(100vw);
  }
  50% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(0);
  }
}
