@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* ========================================
 * NAVIGATION ITEM
 * ======================================== */

  .cinder-navigation-item {
    display: inline-flex;
    align-items: center;
    gap: var(--cinder-space-2);
    min-height: 2rem;
    padding-inline: var(--cinder-space-3);
    padding-block: var(--cinder-space-1-5);

    font-size: var(--cinder-text-sm);
    font-weight: var(--cinder-font-medium);
    line-height: var(--cinder-leading-none);
    text-decoration: none;

    color: var(--cinder-text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--cinder-radius-sm) var(--cinder-radius-sm) 0 0;

    cursor: pointer;
    user-select: none;

    transition:
      color var(--cinder-duration-fast) var(--cinder-ease-standard),
      border-color var(--cinder-duration-fast) var(--cinder-ease-standard),
      background-color var(--cinder-duration-fast) var(--cinder-ease-standard);
  }

  /* ----------------------------------------
 * Hover — only when interactive (not disabled)
 * ---------------------------------------- */

  /* Sticky-hover suppression on touch: wrap hover-only chrome so it doesn't
 * "stick" after tap on touch devices that emulate :hover. */
  @media (hover: hover) {
    .cinder-navigation-item:hover:not([aria-disabled='true']) {
      color: var(--cinder-text-default);
      background-color: var(--cinder-surface-hover);
    }
  }

  /* ----------------------------------------
 * Focus visible
 * ---------------------------------------- */

  .cinder-navigation-item:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    /* Ring replaces the border while focused rather than stacking on it — the two
       together read as one heavier shape than either was designed to be. */
    border-color: transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  /* Forced Colors Mode — box-shadow focus rings are invisible; use a real outline. */
  @media (forced-colors: active) {
    .cinder-navigation-item:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: 3px;
    }
  }

  /* Vertical-variant focus ring — Strategy B-inset.
   *
   * Vertical items are full-bleed to the SideNavigation container edges
   * (`inline-size: 100%` below, inside an unpadded list/nav). The standard
   * OUTSET ring (offset 1px + width 3px = 4px overhang on every side) has no
   * gutter to grow into: it bleeds past the container boundary (clipped where
   * the app sidebar sets `overflow: hidden`) and overlaps the adjacent active
   * row's `--cinder-surface-inset` background, flattening the focus signal.
   * The policy-sanctioned B-inset variant (focus-ring-policy.md, trigger #1:
   * focusable row full-bleed against a container edge) paints a single-band
   * ring entirely within the item's own border box — no overhang, no neighbor
   * or container bleed, zero layout shift. The horizontal variant keeps the
   * outset ring (it is not full-bleed and lives on a different surface), so the
   * inset ring is scoped strictly to `[data-variant='vertical']`. The
   * `[data-variant='vertical']` attribute selector (specificity 0,2,0) wins
   * over the base rule (0,1,0) regardless of order; it is placed after for
   * clarity. The `--_cinder-navigation-item-ring` fallback hook matches the
   * tab/dropdown/number-input inset-ring convention so a variant can recolor
   * the ring without re-authoring the shadow. */
  .cinder-navigation-item[data-variant='vertical']:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: inset 0 0 0 var(--cinder-ring-width)
      var(--_cinder-navigation-item-ring, var(--cinder-ring-color));
  }

  /* ----------------------------------------
 * Active state
 * ---------------------------------------- */

  .cinder-navigation-item[data-active='true'] {
    color: var(--cinder-text-default);
    border-bottom-color: var(--cinder-accent-solid);
  }

  /* ----------------------------------------
 * Disabled state
 * ---------------------------------------- */

  .cinder-navigation-item[aria-disabled='true'] {
    color: var(--cinder-text-disabled);
    cursor: not-allowed;
    opacity: 0.6;
  }

  /* ----------------------------------------
 * Button-specific reset (when rendered as <button>)
 * ---------------------------------------- */

  button.cinder-navigation-item {
    appearance: none;
    background: transparent;
    padding-inline: var(--cinder-space-3);
  }

  /* ----------------------------------------
 * Vertical variant — sidebar / vertical-tab contexts
 *
 * Square row geometry for flush sidebar edges. The inline-start border is the
 * active indicator and is reserved at all times so toggling active state never
 * shifts the label.
 * ---------------------------------------- */

  .cinder-navigation-item[data-variant='vertical'] {
    display: flex;
    inline-size: 100%;
    justify-content: flex-start;
    border-bottom: none;
    border-radius: 0;
    border-inline-start: 2px solid transparent;
  }

  .cinder-navigation-item[data-variant='vertical'][data-active='true'] {
    border-bottom-color: transparent;
    border-inline-start-color: var(--cinder-accent-solid);
    background-color: var(--cinder-surface-inset);
  }

  /* Forced-colors fallback for the vertical-variant inset ring. Inset
   * box-shadow rings vanish in Windows High Contrast Mode, so repaint the
   * outline channel with a NEGATIVE offset that draws the outline INSIDE the
   * item border box — a positive/outset offset would reintroduce the overhang
   * this variant was changed to avoid. `ButtonText` is the policy-correct
   * system color for the anchor/button pressable the item renders as (not
   * `Highlight`, which is for selection). The `[data-variant='vertical']`
   * attribute selector duplicates the base rule's specificity (0,2,0) so it
   * wins inside the media block per the B-inset specificity rule. */
  @media (forced-colors: active) {
    .cinder-navigation-item[data-variant='vertical']:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: calc(var(--cinder-ring-width) * -1);
    }
  }
}