/* cspell: disable */

/* The navigation tree, and any other disclosure tree on the site (the family tree).

   REPLACES @spectrum-css/treeview. Gen2 has no tree view. Markup is nested lists:

     <site-tree>
       <nav class="navigation-tree">
         <ul class="site-tree-list">
           <li>
             <div class="site-tree-row [is-current]">
               <button class="site-tree-toggle" aria-expanded aria-controls>   (a branch)
               <span class="site-tree-toggle site-tree-leaf" aria-hidden>      (or a leaf)
               <span class="site-tree-label site-tree-folder|site-tree-doc"><a href>...</a></span>
             </div>
             <ul class="site-tree-list" id hidden>...</ul>

   WHAT IT IS NOT: an ARIA tree. See WebFramework::Role::Navigation. It is disclosure
   navigation: a button per branch whose aria-expanded says whether its list shows.
   <site-tree> (lib/components/site-tree.ts) does the toggling.

   MEASUREMENTS below are the previous tree's, taken from the running site, so the swap is
   visually a no-op: 24px rows, 16px of indent per level, a 36px toggle area (42px for a leaf,
   which therefore sits 6px right of a sibling folder, as it always did), a 20px icon and an
   8.8px gap before the text. */

:root {
  /* The three icons, drawn once here as masks instead of inlined as SVG into every node:
     the old markup carried two <svg> per node, about 700KB of every page. A mask takes its
     colour from background-color, so these follow currentColor as the SVGs did. */
  --site-tree-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 0h512v512H0z' fill='none' /%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='56' d='m184 112l144 144l-144 144' /%3E%3C/svg%3E");
  --site-tree-icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 0h512v512H0z' fill='none' /%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M64 192v-72a40 40 0 0 1 40-40h75.89a40 40 0 0 1 22.19 6.72l27.84 18.56a40 40 0 0 0 22.19 6.72H408a40 40 0 0 1 40 40v40' /%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M479.9 226.55L463.68 392a40 40 0 0 1-39.93 40H88.25a40 40 0 0 1-39.93-40L32.1 226.55A32 32 0 0 1 64 192h384.1a32 32 0 0 1 31.8 34.55' /%3E%3C/svg%3E");
  --site-tree-icon-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 0h512v512H0z' fill='none' /%3E%3Cpath fill='none' stroke='currentColor' stroke-linejoin='round' stroke-width='32' d='M416 221.25V416a48 48 0 0 1-48 48H144a48 48 0 0 1-48-48V96a48 48 0 0 1 48-48h98.75a32 32 0 0 1 22.62 9.37l141.26 141.26a32 32 0 0 1 9.37 22.62Z' /%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M256 56v120a32 32 0 0 0 32 32h120m-232 80h160m-160 80h160' /%3E%3C/svg%3E");
}

.site-tree-list {
  /* Depth, counted by nesting, so the markup need not say how deep a node is. The root list
     is 0; a list inside an item is its parent's depth plus one. (An item republishes its
     list's depth under another name because a custom property cannot refer to itself.) */
  --site-tree-depth: 0;
  list-style: none;

  margin: 0;
  padding: 0;
}

.site-tree-list .site-tree-list {
  --site-tree-depth: calc(var(--site-tree-parent-depth) + 1);
}

.site-tree-list > li {
  --site-tree-parent-depth: var(--site-tree-depth);
}

.site-tree-list[hidden], .site-tree-list > li[hidden] {
  display: none;
}

/* A row spans the whole width, whatever its depth, so the hover and selected tints reach
   the pane edge. Indent is padding. */
.site-tree-row {
  align-items: center;
  block-size: 24px;
  box-sizing: border-box;
  display: flex;
  line-height: 1.2;
  padding-inline: calc(var(--site-tree-depth) * 16px) 12px;
}

.site-tree-row:hover {
  background-color: var(--swc-gray-100);
}

/* 20% of the accent over the page, as it was. color-mix, not rgb(var(--*-rgb) / 20%): the
   -rgb companions are emitted once from the light value and would be wrong in dark mode. */
.site-tree-row.is-current {
  background-color: color-mix(
    in srgb,
    var(--swc-accent-content-color-default) 20%,
    transparent
  );
}

/* The toggle's box is the row high and 36px wide (a comfortable target, and 24px is the
   WCAG 2.5.8 minimum). Only the chevron inside it is drawn. */
.site-tree-toggle {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  block-size: 24px;
  border: 0;
  box-sizing: border-box;
  color: var(--text-1);
  cursor: pointer;
  display: grid;
  flex: 0 0 36px;
  inline-size: 36px;
  margin: 0;
  padding: 0;
  place-items: center;
}

button.site-tree-toggle::before {
  background-color: currentcolor;
  block-size: 14px;
  content: "";
  inline-size: 14px;
  -webkit-mask: var(--site-tree-icon-chevron) center / contain no-repeat;
          mask: var(--site-tree-icon-chevron) center / contain no-repeat;
  transition: transform 130ms ease-in-out;
}

button.site-tree-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

button.site-tree-toggle:focus-visible {
  outline: 2px solid var(--swc-link-focus-indicator-color);
  outline-offset: -2px;
}

/* A leaf reserves a little more than a toggle, to match the previous tree. */
.site-tree-leaf {
  cursor: default;
  flex: 0 0 42px;
  inline-size: 42px;
}

.site-tree-label {
  align-items: center;
  block-size: 20px;
  display: flex;
  flex: 1 1 auto;
  gap: 8.8px;
  min-inline-size: 0;
  overflow: hidden;
}

.site-tree-folder::before, .site-tree-doc::before {
  background-color: var(--swc-neutral-subdued-content-color-default);
  block-size: 20px;
  content: "";
  flex: none;
  inline-size: 20px;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.site-tree-folder::before {
  -webkit-mask-image: var(--site-tree-icon-folder);
          mask-image: var(--site-tree-icon-folder);
}

.site-tree-doc::before {
  -webkit-mask-image: var(--site-tree-icon-doc);
          mask-image: var(--site-tree-icon-doc);
}

/* Long titles are cut with an ellipsis; the full title is on the link's title attribute. */
.site-tree-label a {
  color: var(--swc-neutral-content-color-default);
  min-inline-size: 0;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-tree-label a:hover {
  color: var(--swc-neutral-content-color-hover);
  text-decoration: underline;
}

.site-tree-label a:focus-visible {
  outline: 2px solid var(--swc-link-focus-indicator-color);
  outline-offset: 2px;
}

/* The current page. blue-1100, not the raw accent: the accent is 3.4:1 on this page's
   background and the AA minimum for text is 4.5:1 (see global.css). aria-current="page" in
   the markup is what carries the meaning for anything not looking at colour. */
.site-tree-label a[aria-current] {
  color: var(--swc-link-text-color-default);
}

.site-tree-label a[aria-current]:hover {
  color: var(--swc-link-text-color-hover);
}

@media (prefers-reduced-motion: reduce) {
  button.site-tree-toggle::before {
    transition: none;
  }
}