/* Safari 17.x bug: `:scope:hover` (Flavor A) and `:scope[selected]`
   (Flavor B — attribute-removal restyle) both fail inside `@scope`.
   Selectors moved out — custom props from `:where(:scope)` are still set
   on the element via inheritance. Specificity (0,1,1 / 0,2,1) preserved.
   Safari < 18 is below the §1 floor (ADR-0007); fix protects opt-in
   consumers extending below the floor and is harmlessly redundant on
   engines without the bug. */
nav-item-ui:hover {
  background: var(--nav-item-bg-hover);
  color: var(--nav-item-fg-hover);
}
nav-item-ui:hover [slot="icon"] {
  color: var(--nav-item-fg-hover);
}
nav-item-ui[selected] {
  background: var(--nav-item-bg-selected);
  color: var(--nav-item-fg-selected);
}
nav-item-ui[selected] [slot="icon"] {
  color: var(--nav-item-icon-fg-selected);
}
nav-item-ui[selected] [slot="icon"]:empty::before {
  content: '';
  width: 2px;
  height: 1em;
  border-radius: 1px;
  background: var(--nav-item-accent);
}

@scope (nav-item-ui) {
  :where(:scope) {
    --nav-item-accent:          var(--a-accent);
    --nav-item-row-height:      var(--a-size);
    --nav-item-row-height-sm:   var(--a-size-sm);
    --nav-item-row-height-lg:   var(--a-size-lg);
    --nav-item-row-px:          var(--a-ui-px);
    --nav-item-row-gap:         var(--a-space-1);
    --nav-item-row-radius:      var(--a-radius-md);
    --nav-item-font-size:       var(--a-ui-size);
    --nav-item-font-size-sm:    var(--a-ui-sm);
    --nav-item-font-size-lg:    var(--a-ui-lg);
    --nav-item-font-weight:     var(--a-weight-normal);
    --nav-item-fg:              var(--a-ui-text-subtle);
    --nav-item-fg-hover:        var(--a-ui-text-hover);
    --nav-item-fg-selected:     var(--a-ui-text-selected);
    --nav-item-icon-fg:         var(--a-ui-text-muted);
    --nav-item-icon-fg-selected: var(--nav-item-accent);
    --nav-item-bg-hover:        var(--a-ui-bg-hover);
    --nav-item-bg-selected:     var(--a-ui-bg-selected);
    --nav-item-icon-size:       calc(var(--nav-item-row-height) - var(--a-space-2));
    --nav-item-badge-size:      var(--a-ui-sm);
    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
}

  :scope {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--nav-item-row-gap);
    height: var(--nav-item-row-height);
    padding: 0 var(--nav-item-row-px);
    border-radius: var(--nav-item-row-radius);
    font-size: var(--nav-item-font-size);
    color: var(--nav-item-fg);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition:
      background var(--nav-duration-fast) var(--nav-easing),
      color var(--nav-duration-fast) var(--nav-easing);
    outline: none;
    font-weight: var(--nav-item-font-weight);
  }

  :scope:focus-visible {
    background: var(--nav-item-bg-hover);
    color: var(--nav-item-fg-hover);
    outline: none;
  }

  /* :scope[selected] rules moved outside @scope — see Safari 17.x bug note at top. */

  /* Icon slot — always present, reserves space even when empty */
  [slot="icon"] {
    width: var(--nav-item-icon-size);
    height: var(--nav-item-icon-size);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nav-item-icon-fg);
    transition: color var(--nav-duration-fast) var(--nav-easing);
  }

  [slot="icon"] icon-ui {
    --a-icon-size: calc(var(--nav-item-icon-font-size) + 2px);
  }

  /* Selected accent line on empty icon slot moved outside @scope — see Safari 17.x bug note at top. */

  [slot="text"] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  [slot="badge"] {
    font-size: var(--nav-item-badge-size);
    color: var(--nav-item-badge-fg);
    background: var(--nav-item-badge-bg);
    padding: 1px var(--nav-item-badge-px);
    border-radius: var(--nav-item-badge-radius);
    line-height: 1.4;
    margin-inline-start: auto;
  }

  [slot="trailing"] {
    margin-inline-start: auto;
    font-size: var(--nav-item-trailing-font);
    color: var(--nav-item-trailing-fg);
    border: 1px solid var(--nav-item-trailing-border);
    border-radius: var(--nav-item-trailing-radius);
    padding: 0 var(--nav-item-trailing-px);
    line-height: 1.6;
    flex-shrink: 0;
  }

  /* ── Collapsed nav: hide text, badge, trailing ── */
  nav-ui[collapsed] & [slot="text"],
  nav-ui[collapsed] & [slot="badge"],
  nav-ui[collapsed] & [slot="trailing"] {
    display: none;
  }

  nav-ui[collapsed] & {
    justify-content: center;
    padding: 0;
  }

  @container sidebar (max-width: 96px) {
    [slot="text"], [slot="badge"], [slot="trailing"] {
      display: none !important;
    }
    [slot="icon"] icon-ui {
      --a-icon-size: 18px;
    }
    :scope {
      justify-content: center;
      padding: 0;
    }
  }

  /* ── Size variants ── */
  :scope[size="sm"] {
    --nav-item-row-height: var(--nav-item-row-height-sm);
    --nav-item-font-size:  var(--nav-item-font-size-sm);
  }

  :scope[size="lg"] {
    --nav-item-row-height: var(--nav-item-row-height-lg);
    --nav-item-font-size:  var(--nav-item-font-size-lg);
  }
}

/* ── Section variant — items render flat (no icon space, no indent) ──
   Section-variant rails read as plain links rather than primary-style
   rows: no reserved icon space when absent, left-edge accent bar for
   the selected state instead of an in-icon accent.

   Two ways to enable: either
     (a) `<nav-item-ui variant="section">` directly, or
     (b) `<nav-ui variant="section"> … nav-item-ui`  (cascade from parent).
*/

nav-item-ui[variant="section"] [slot="icon"]:empty,
nav-ui[variant="section"] nav-item-ui:not([variant]) [slot="icon"]:empty {
  display: none;
}

/* When an explicit icon IS present, keep it but at a smaller scale. */
nav-item-ui[variant="section"] [slot="icon"]:not(:empty),
nav-ui[variant="section"] nav-item-ui:not([variant]) [slot="icon"]:not(:empty) {
  width: 1em;
  height: 1em;
}

/* Selected indicator — section variant relies on the row-level
   background fill + text color + medium weight (no left-edge bar,
   no in-icon accent). Suppress the in-icon accent that the primary
   variant paints into the empty icon slot. */
nav-item-ui[variant="section"][selected] [slot="icon"]:empty::before,
nav-ui[variant="section"] nav-item-ui:not([variant])[selected] [slot="icon"]:empty::before {
  content: none;
}
