/* The lz-overflow-nav styles. From dryan-tools' <dryan-overflow-nav>
   (tools.dryan.tech/overflow-nav.js), for an element whose links, toggle and
   menu are all light DOM. */
@layer components {
  @scope (lz-overflow-nav) {
    :scope {
      --_border: var(--border, var(--surface-4));
      --_link: var(--link);
      --_brand: var(--brand, var(--link));
      --_surface: var(--surface-3);
      --_radius: var(--radius-2);
      --_shadow: var(--shadow-2);
      --_fw: var(--font-weight-6);
      --_gap-1: var(--size-1);
      --_gap-2: var(--size-2);

      /* Always claim the full width the surrounding layout gives it, rather
       than shrinking to fit only the visible links: otherwise, once links are
       hidden, it could never tell that more room had come free. */
      display: flex;
      flex: 1 1 auto;
      flex-wrap: nowrap;
      gap: var(--size-3) var(--size-4);
      align-items: center;
      justify-content: flex-end;
      min-inline-size: 0;

      /* Each nav's toggle anchors its own menu */
      anchor-scope: --lz-overflow-toggle;

      /* Clip the row (links measured before they move into the menu, or all
         of them without script), but leave room for focus rings: normalize
         draws a link's 5px outside it, so 8px covers that and its width */
      overflow: clip;
      overflow-clip-margin: 8px;
    }

    /* every link, in the row or the menu: the underline in the link's own
       colour, not normalize's indigo */
    a {
      text-decoration-color: currentcolor;
    }

    :scope > a {
      flex: none;
      white-space: nowrap;
    }

    :scope > button {
      all: unset;
      flex: none;
      padding-inline: var(--_gap-1);

      /* The anchor for the menu's position below: no script, no inline styles */
      anchor-name: --lz-overflow-toggle;
      font: inherit;
      font-weight: var(--_fw);
      line-height: 1;
      color: var(--_link);
      cursor: pointer;

      &:hover,
      &:focus-visible {
        text-decoration: underline;
      }

      &:focus-visible {
        outline: 2px solid var(--_brand);
        outline-offset: 2px;
      }

      &[hidden] {
        display: none;
      }

      svg {
        display: block;
        inline-size: 1.25em;
        block-size: 1.25em;
      }
    }

    /* Below the toggle, its inline-end edge lined up with the toggle's
       (logical, so it reads right in a right-to-left page) */
    :scope > .menu {
      position: fixed;

      /* Set while closed too: the exit transition keeps it displayed, and
         falling back to a row would stretch it across the page */
      flex-direction: column;
      gap: var(--_gap-1);
      padding: var(--_gap-2);
      margin: 0;
      margin-block-start: var(--_gap-1);
      position-area: block-end span-inline-start;
      position-anchor: --lz-overflow-toggle;
      background-color: color-mix(in oklch, var(--_surface), transparent 10%);
      border: 1px solid var(--_border);
      border-radius: var(--_radius);
      box-shadow: var(--_shadow);

      /* The menu fades and slides in and out, as popovers do in the admin
         (bespoke/src/admin/ui/style/admin.css). Entry comes from
         @starting-style; `display` and `overlay` transition discretely so the
         menu stays in the top layer until its exit finishes. Reduced motion
         gets a near-instant one (--transition-duration). */
      opacity: 0;
      backdrop-filter: blur(var(--size-2));
      translate: 0 -1em;

      /* No accent stop reads on a dark grey, so in dark mode the menu itself
         takes the accent and its links go light */
      @media (prefers-color-scheme: dark) {
        --_surface: var(--accent-7);
      }

      /* Only while open: display set unconditionally would override the
         browser's [popover] { display: none } and leave it showing when
         closed */
      &:popover-open {
        display: flex;
        opacity: 1;
        translate: 0 0;
      }

      & > a {
        display: block;
        padding: var(--_gap-1) var(--_gap-2);
        color: var(--accent);
        white-space: nowrap;

        /* A media query, not light-dark(): over a hero the header forces
           color-scheme: dark, which the menu would inherit */
        @media (prefers-color-scheme: dark) {
          color: var(--gray-1);
        }
      }

      transition:
        opacity var(--transition-duration) var(--ease-out-3),
        translate var(--transition-duration) var(--ease-out-3),
        overlay var(--transition-duration) allow-discrete,
        display var(--transition-duration) allow-discrete,
        outline var(--transition-duration);

      @starting-style {
        &:popover-open {
          opacity: 0;
          translate: 0 -1em;
        }
      }
    }
  }

  /* Over a hero the row sits on its dark gradient: white links and toggle.
     The menu keeps its own surface, so its links are left alone. */
  @scope (body:has(lz-hero) lz-overflow-nav) to (.menu) {
    :scope > :is(a[href], button) {
      color: white;
    }
  }
}