// A mixin, so this file outputs nothing when the library wildcard imports it on its own.
// _ds2-top-nav.scss includes it at the end of the block, after the mobile rules.
@mixin ds2-top-nav-desktop {
  @media (min-width: $topNavDesktopBreakpoint) {
    &--js {
      // Content sits in a centred column up to $topNavDesktopMaxWidth, at least $topNavLogoInset
      // from each side.
      $contentInset: unquote("max(#{$topNavLogoInset}, calc((100% - #{$topNavDesktopMaxWidth}) / 2))");

      // Equal side columns keep the links centred on the page.
      display: grid;
      // next line disabled to help options be more centralised
      // grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      column-gap: $spacing-4;
      align-items: center;
      min-height: $topNavDesktopBarHeight;
      padding-inline: $contentInset;

      .ds2-top-nav__bar {
        display: contents;
      }

      .ds2-top-nav__logo {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        margin: 0;
        padding: 0;
      }

      .ds2-top-nav__menu-toggle {
        display: none;
      }

      // The search icon sits at the right.
      .ds2-top-nav__search-toggle {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
      }

      .ds2-top-nav__search {
        display: none;
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        width: 15.625rem;
        max-width: none;
        height: 2.75rem;
        margin: 0;
      }

      // Level 1 links in a row.
      .ds2-top-nav__nav {
        display: block;
        position: static;
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        min-height: 0;
        padding: 0;
        background: none;
        overflow: visible;
      }

      .ds2-top-nav__list--level-1 {
        flex-direction: row;
        gap: 0;
        max-width: none;
        padding: 0;

        > .ds2-top-nav__item > .ds2-top-nav__link {
          width: auto;
          // Full bar height, so the dropdown starts right below the bar.
          min-height: $topNavDesktopBarHeight;
          padding: 0 $topNavDesktopLinkPaddingFluid;

          &[aria-expanded="true"] {
            color: $topNavHighlightColour;
          }

          // Points down when closed and up when open.
          > .ds2-top-nav__arrow {
            transform: rotate(90deg);
            transition: transform 0.2s ease;

            @media (prefers-reduced-motion: reduce) {
              transition: none;
            }
          }

          &[aria-expanded="true"] > .ds2-top-nav__arrow {
            transform: rotate(-90deg);
          }
        }
      }

      // No back buttons on desktop, as levels 2 and 3 show side by side.
      .ds2-top-nav__back {
        display: none;
      }

      // Level 2: a full-width dropdown below the bar.
      .ds2-top-nav__panel--level-2 {
        display: none;
        position: absolute;
        z-index: $topNavMenuZIndex;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        height: auto;
        min-height: 0;
        overflow: visible;
        padding: $spacing-3 $contentInset $spacing-7;
        transform: none;
        visibility: visible;
        transition: none;

        // Gives the dropdown an edge in high contrast mode.
        // In px so the edge stays a hairline.
        @media (forced-colors: active) {
          border-bottom: 1px solid CanvasText;
        }
      }

      // Level 3 sits beside the level 2 column.
      .ds2-top-nav__panel--level-3 {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
        padding: 0;
        background: none;
        transform: none;
        visibility: visible;
        transition: none;
      }

      .ds2-top-nav__panel--open {
        display: block;
      }

      .ds2-top-nav__list--level-2 {
        position: relative;
        gap: 0;
        width: 33%;
        max-width: none;
        padding: 0;
      }

      .ds2-top-nav__list--level-3 {
        gap: 0;
        max-width: none;
        padding: 0;
      }

      .ds2-top-nav__panel .ds2-top-nav__link {
        min-height: 3.25rem;
        padding: 0;

        &:focus-visible {
          outline-offset: $topNavFocusOutlineOffset;
        }

        &[aria-expanded="true"] {
          color: $topNavHighlightColour;
        }
      }

      // Level 2 arrows grow across to the level 3 column while it's open.
      .ds2-top-nav__list--level-2 > .ds2-top-nav__item > .ds2-top-nav__link {
        padding-right: $spacing-5;

        .ds2-top-nav__link-text {
          flex: none;
        }

        > .ds2-top-nav__arrow {
          flex: 0 1 1.25rem;
          color: $topNavHighlightColour;
          transition: flex-grow 0.4s ease;

          @media (prefers-reduced-motion: reduce) {
            transition: none;
          }
        }

        &[aria-expanded="true"] > .ds2-top-nav__arrow {
          flex-grow: 1;
        }
      }

      // While a level 2 item is open, the others fade back so it and its links stand out.
      // Hover and focus bring a link back to full strength, so the focus ring isn't faded.
      .ds2-top-nav__list--level-2 > .ds2-top-nav__item > .ds2-top-nav__link {
        transition: opacity 0.2s ease;

        @media (prefers-reduced-motion: reduce) {
          transition: none;
        }
      }

      .ds2-top-nav__list--level-2:has(.ds2-top-nav__item > [aria-expanded="true"])
        > .ds2-top-nav__item
        > .ds2-top-nav__link:not([aria-expanded="true"]):not(:hover):not(:focus-visible) {
        opacity: 0.6;

        // High contrast mode is there to maximise contrast, so nothing fades.
        @media (forced-colors: active) {
          opacity: 1;
        }
      }
    }

    // Desktop search open: the box takes the place of the nav links.
    &--search-open,
    &--search-closing {
      // Columns: logo, then search.
      grid-template-columns: auto minmax(0, 1fr);

      .ds2-top-nav__search-toggle {
        display: none;
      }

      // The logo stays on desktop.
      .ds2-top-nav__logo {
        display: inline-flex;
      }

      .ds2-top-nav__nav {
        display: none;
      }

      // Packed to the right, so the box opens leftwards from the icon with the arrow on its edge.
      .ds2-top-nav__search-group {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: $spacing-4;
        grid-column: 2;
        grid-row: 1;
      }

      .ds2-top-nav__search-close {
        grid-column: auto;
        justify-self: auto;
      }

      .ds2-top-nav__search {
        display: flex;
        flex: 1;
        width: auto;
        max-width: $topNavDesktopSearchMaxWidth;
        justify-self: auto;
        margin-inline: 0;
      }
    }

    &--search-open .ds2-top-nav__search {
      animation: ds2-top-nav-desktop-search-grow $topNavSearchSlideDuration ease;

      @media (prefers-reduced-motion: reduce) {
        animation: none;
      }
    }

    &--search-closing .ds2-top-nav__search {
      animation: ds2-top-nav-desktop-search-shrink $topNavSearchSlideDuration ease forwards;
    }

    // On desktop the logo and icon stay in the grid while search animates.
    &--search-opening,
    &--search-closing {
      .ds2-top-nav__logo,
      .ds2-top-nav__search-toggle {
        position: static;
        inset: auto;
        margin-block: 0;
        pointer-events: auto;
      }

      .ds2-top-nav__logo {
        animation: none;
      }
    }

    // Closing: the icon is back straight away so it can take focus, but only fades in at the end,
    // as the box collapses into it.
    &--search-closing {
      .ds2-top-nav__search-toggle {
        display: inline-flex;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        animation: ds2-top-nav-icon-fade-in-late $topNavSearchSlideDuration ease;
      }
    }

    &--search-opening {
      .ds2-top-nav__search-toggle {
        display: none;
      }
    }
  }
}