@container style(--mobile-nav: true) {
  .menu--main {
    --menu-top-padding: 7.5rem;
    --mobile-menu-highlight-color: var(--color--primary-50);

    position: fixed;
    top: var(--drupal-displace-offset-top, 0);
    left: 100%;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    width: 100%;
    max-width: 31.25rem;
    height: 100vh;
    /* stylelint-disable-next-line unit-allowed-list */
    height: 100dvh; /*  Dynamic viewport height unit used in mobile Safari. */
    padding: var(--menu-top-padding) var(--sp2) var(--sp2);
    transition:
      visibility 0.2s,
      transform 0.2s;
    color: var(--text-on-neutral-dark);
    background: var(--neutral-dark);

    &.is-active {
      z-index: 102; /*  Appear below Gin Horizontal toolbar, which has value of 103. */
      visibility: visible;
      transform: translateX(-100%);
    }
  }

  .primary-nav__menu-link {
    flex-grow: 1;
    text-decoration: none;
    color: inherit;
  }

  .primary-nav__button-toggle {
    color: var(--mobile-menu-highlight-color);
  }

  /* Wrapper element */
  .primary-nav {
    display: flex;
    overflow: auto;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }

  /* Level 1 Nav */
  .primary-nav__menu--level-1 {
    font-size: 1.5rem;
  }

  .primary-nav__menu-link--level-1 {
    display: flex;
    padding: 0.625rem 1.25rem;
  }

  .primary-nav__menu-link--button {
    position: relative;
    flex-basis: 100%;
    cursor: pointer;

    /* Plus icon for mobile navigation. */
    &.primary-nav__menu-link--has-children {
      padding-inline-end: var(--sp3); /* Ensure text does not overlap icon. */

      &::before,
      &::after {
        position: absolute;
        inset-inline-end: 0.5625rem;
        inset-block-start: calc(
          var(--sp0-5) + 1.0625rem
        ); /* Visually align button with menu link text. */

        width: 1.125rem;
        height: 0;
        content: '';
        /* Intentionally not using CSS logical properties. */

        border-top: solid 3px var(--mobile-menu-highlight-color);
      }

      &::after {
        transition: opacity 0.2s;
        transform: rotate(90deg);
      }

      &[aria-expanded='true']::after {
        opacity: 0;
      }
    }
  }

  /* Level 2 Nav */
  .primary-nav__menu--level-2 {
    display: flex;
    visibility: hidden;
    overflow: clip;
    flex-direction: column;
    flex-basis: 100%;
    max-height: 0;
    margin-left: var(--sp);
    padding-left: 1.25rem;
    transition:
      max-height 0.2s,
      visibility 0.2s;
    border-left: solid 6px var(--mobile-menu-highlight-color);

    &.is-active-menu-parent {
      visibility: visible;
      max-height: max-content;
      opacity: 1;
    }
  }

  .primary-nav__menu-item--level-2 {
    margin: var(--sp0-5) 0;
  }

  .primary-nav__menu-link--level-2 {
    font-size: 1.25rem;
  }

  /*  Account menu item that shows when authenticated. */
  .account-menu-item {
    button {
      display: none;
    }

    .primary-nav__menu--level-2 {
      display: flex;
      visibility: visible;
      flex-direction: row;
      align-items: flex-start;
      max-height: none;
      margin-top: var(--sp3);
      margin-left: 0;
      border-left: 0;
      gap: 1em;
    }

    .primary-nav__menu-link {
      text-transform: uppercase;
      font-size: 0.875rem;
    }
  }
}