.navigation {
  display: grid;
  grid-row: 1;
  grid-column: 1/-1;
  border-bottom: 1px solid var(--secondary-color);
  align-content: center;
  padding: 0.5rem;
  justify-content: start;

  .navigation-items,
  .sub-nav > ul {
    list-style-type: none;
  }

  .navigation-items {
    --padding: 1rem;
    display: grid;
    position: fixed;
    height: calc(100% - var(--navigation-height) - var(--padding) * 2);
    bottom: 0;
    left: 0;
    width: 0%;
    grid-auto-rows: min-content;
    grid-template-columns: 4fr 1fr;
    background-color: Canvas;
    transition: 0.5s ease;
    overflow-x: hidden;
    padding: var(--padding) 0;
    margin: 0;

    & li {
      padding: 0.5rem 0;

      a {
        text-wrap: nowrap;
      }
    }

    &.open {
      padding: var(--padding);
      width: calc(100% - var(--padding) * 2);
    }
  }

  .sub-nav {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: subgrid;
    user-select: none;
    transition: inherit;

    > ul {
      > li {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: 4fr 1fr;
      }
      z-index: 2;
      background-color: Canvas;
      position: absolute;
      overflow: hidden;
      padding: var(--padding) 0;
      width: 0;
      height: 100%;
      bottom: 0;
      right: 0;
      transition: inherit;
      height: calc(100% - var(--padding) * 2);
      display: grid;
      grid-auto-rows: min-content;
      grid-template-columns: 4fr 1fr;
    }
  }

  .sub-nav.open,
  .sub-nav:has(ul a[aria-current='page']) {
  }
  .sub-nav.open > ul
/*
,
  .sub-nav ul:has(a[aria-current='page'])
*/ {
    width: calc(100% - var(--padding) * 2);
    padding-left: var(--padding);
    padding-right: var(--padding);
  }
}

@media only screen and (min-width: 729px) {
  .navigation {
    .navigation-items {
      position: static;
      height: initial;
      align-content: center;
      justify-content: left;
      grid-template-columns: none;
      grid-auto-flow: column;
      overflow: initial;
      width: initial;
      padding: 0.5rem;

      li {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.25rem;

        .arrow {
          transform: rotate(90deg);
        }
      }

      > li:has(+ li) {
        position: relative;
        padding-right: 1rem;
        margin-right: 1rem;

        &::after {
          --height: 12px;
          content: '';
          position: absolute;
          height: var(--height);
          border-right: 1px solid var(--secondary-color);
          top: calc((100% - var(--height)) / 2);
          right: 0;
        }
      }
    }

    .sub-nav {
      position: relative;
      display: block;
      grid-column: span 1;
      user-select: none;

      > ul {
        > button {
          display: none;
        }
        padding: 0 0.5rem;
        overflow: hidden;
        height: 0 !important;
        width: 0 !important;
      }

      &.open > ul {
        z-index: 1;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: Canvas;
        height: max-content !important;
        width: max-content !important;
        overflow: visible;
        margin-top: 1rem;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        border: 1px solid var(--tertiary-color);
        box-shadow: 0.125rem 0.125rem 0.1rem var(--tertiary-color);
      }

      .sub-nav {
        position: relative;

        &.open > ul {
          top: 0;
          left: 100%;
          margin-top: -0.5rem;
          margin-left: calc(1rem + 0.25rem);
        }
      }
    }

    .visibility-toggler {
      display: none;
    }
  }
}